Почему пробел в настоящее время не влияет на LI в Internet Explorer? - PullRequest
Новая
       1

Почему пробел в настоящее время не влияет на LI в Internet Explorer?

4 голосов
/ 11 апреля 2011

Я бы хотел, чтобы все мои LI отображались в одной строке, поэтому я установил для каждого из них свойство display в inline-block и установил white-space = nowrap в родительском UL. Я получаю ожидаемое неупаковывающее поведение в FireFox и Chrome, но IE8 игнорирует nowrap и отображает элементы под другим.

Есть идеи, что я делаю не так?

Вот HTML и CSS ... 

<html>
    <head>
        <style type="text/css"> 
            li
            {
                display: inline-block;
                list-style: none outside none;
                padding: 0px 10px 0px 10px;
                white-space: nowrap;
            }
            ul
            {
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
        <div style="float: left; width: 300px;">
            <ul>
                <li>
                    Menu 1
                </li>
                <li>
                    Menu Menu Menu 2
                </li>
                <li>
                    Menu 3
                </li>
                <li>
                    Menu 4
                </li>
            </ul>
        </div>
    </body>
</html>

Ответы [ 3 ]

3 голосов
/ 11 апреля 2011

Если вы хотите, чтобы ваши элементы отображались один за другим, попробуйте удалить -block вашего свойства display.

Установите его следующим образом: 

display: inline;
2 голосов
/ 11 апреля 2011

При использовании списков для меню:

  • За исключением float:left (для горизонтальных меню), никогда не накладывайте стиль на LI
  • Поместите все стили в тег A и используйте display:block

  • используйте сброс для вашего списка:

    .menu ul, .menu li { список-стиль: нет; обивка: 0; Маржа: 0 }

Меню HTML должно выглядеть так: 

<div class="menu">
    <ul>
        <li>
             <a href="...">Menu 1</a>
         </li>
    ...
    </ul>
</div>

Смотрите мой урок, Я люблю списки .

0 голосов
/ 12 января 2012

тип документа также должен помочь.в противном случае вы работаете с IE в режиме причуд.тогда не ожидайте, что он правильно покажет ваш CSS.

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

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

...