列表项inline在div中被忽略

Question

我想创建一个简单的无序列表，并且一切看起来都很完美，直到每个列表项都包含一个DIV，然后列表似乎忽略了css代码行display: inline，并显示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仍显示为一个块。你可以明确地告诉它使用div来显示：inline，但是我认为避免在li中使用div会更好。

Answer 2

基本上，你的李显示内联，但里面的div仍然是块级别，所以这就是他们如何显示在你的里面。如果你真的想这个工作，因为是，使这些div明确直列...

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

...但是，杰弗里Aylesworth和布雷克都是正确的 - 你最好跳过的DIV，如果你有这个内容的控制权。使用其他内嵌的东西。