Горизонтальные списки без плавающего LI - PullRequest
Новая
       2

Горизонтальные списки без плавающего LI

1 голос
/ 04 августа 2011

Хорошо, поэтому я пишу CSS для панели навигации, которая использует неупорядоченный список для организации меню. Меню расположено по центру, а не сдвинуто в какую-либо сторону, и ширина любого данного элемента li не может быть предварительно определена (она зависит от количества текста в пункте меню), поэтому я не могу жестко задавать ширину.

У меня есть следующий код CSS: 

#nav ul {
    list-style: none;
    padding-bottom: 10px;
    height:16px;
}
#nav ul li {
    position: relative;
    display: inline-block;
}
#nav {
    position: relative;
    margin-top: -30px;
    text-align: center;
    font-family: Arial,STHeiti,'Microsoft YaHei',sans-serif;
    font-size: 14px;
}

для элемента nav, и это прекрасно работает для создания центрированного меню nav в Chrome 13. Но когда я просматриваю страницу в IE8, UL поворачивается вертикально, и я не могу заставить его стать горизонтальным.

Пока что результаты поиска показывают, что мне нужно float:left; или float:right;

s, чтобы сделать меню горизонтальным. Я пробовал это, и оно делает горизонтальное меню в IE8, но оно будет плавать влево или вправо. Мне нужно центрировать меню, и, по-видимому, нет float:center;.

HTML-код, соответствующий меню: 

<div id="nav">
    <ul>
        <li class="current_page_item">[LINK]</li>
        <li class="page_item">[LINK]</li>
        <li class="page_item">[LINK]</li>
    </ul>
</div>

Есть ли способ без необходимости знать ширину LI или прибегать к JS для центрирования меню И горизонтали?

Ответы [ 3 ]

3 голосов
/ 04 августа 2011

просто используйте следующее на вашем li: 

display: inline;

Должны получить желаемые результаты.

2 голосов
/ 04 августа 2011

Этот код отлично работает в IE8, убедитесь сами:

http://jsfiddle.net/bEEEb/

Это, вероятно, не работает для вас, потому что вы не в режиме IE8 (альтернативы - режим IE7 или режим Quirks).

Добавьте doctype в качестве первой строки, если у вас его нет: 

<!DOCTYPE html>

Если вам нужно, чтобы это также работало в IE7 (в котором inline-block по умолчанию работает только с естественными встроенными элементами), тогда замените display: inline-block на: 

display: inline-block;
*display: inline;
zoom: 1;

.. конечно, если вы можете обойтись без display: inline, это самое простое исправление, , но вам все равно следует разобраться, почему ваша страница не отображается в режиме IE8.

1 голос
/ 04 августа 2011

IE не поддерживает display: inline-block, вместо него используйте display: inline для элемента li.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...