Question

我希望我的所有LI都显示在同一行，因此我将每个LI的显示属性设置为内联块，并在父UL上设置white-space = nowrap。我在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>

Answer 1

如果您希望元素显示在另一个旁边，请尝试删除显示属性的-block。

将其设置如下：

display: inline;

Answer 2

使用菜单列表时：

除了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>

请参阅我的教程I love lists。

Answer 3

doctype也应该有所帮助。否则你在怪癖模式下使用IE浏览器。不要指望它能正确显示你的css。

为什么white-space nowrap对Internet Explorer中的LI没有影响？

3 个答案: