列表項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，如果你有這個內容的控制權。使用其他內嵌的東西。