在div中忽略列表项内联

Question

我正在尝试创建一个简单的无序列表，并且一切似乎都很好，直到每个列表项包含DIV，然后列表似乎忽略display: inline css行，并以块样式显示div。

CSS：

#wrapper ul li
{
    display:inline;
}

HTML：

<div id="wrapper">
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
</div>

但是，如果我使每个列表项包含DIV，则列表项不再显示为内联，

<div id="wrapper">
    <ul>
        <li><div>item1</div></li>
        <li><div>item2</div></li>
        <li><div>item3</div></li>
    </ul>
</div>

我如何解决这个问题.. 如果需要更多细节，我可以提供更多细节。

Answer 1

CSS告诉它使li内联，显示不继承，所以div仍然显示为块。您可以明确告诉它进行ul li div显示：内联也是如此，但我认为最好避免在li中使用div。

Answer 2

基本上，你的li正在显示内联，但里面的div仍然是块级别，所以这就是它们在你的li里面显示的方式。如果你真的，真的希望这个工作，那么，明确地内联这些div ......

#wrapper ul li, #wrapper ul li div
{
display:inline;
}

...但是，杰弗里艾尔斯沃思和布莱克都是对的 - 如果你掌握了这些内容，你最好不要跳过div。使用已内联的其他内容。