使用CSS在水平列表中包裝每個項目

我有一個包含長項目的水平列表，我想要包裝。如果一個列表項目非常長或者所有列表項目都非常短，則列表包裝會很好。使用CSS在水平列表中包裝每個項目

但是，如果兩個列表項都很長，它們將不會在可用空間中分割。此圖像顯示了問題：

enter image description here

下面是我使用的標記：

<html> 
<style> 
    ul {text-align:left; width:400px} 
    li {float:left; padding-left:20px; list-style-type:none; display:inline; white-space:normal;} 
    li a {display:inline; white-space:normal;} 
</style> 
<body> 
<ul> 
    <li><a href="#">>alf; fa sadlf;</a> </li> 
    <li><a href="#">>a sdf; fa sd; asd;lfgj </a></li> 
    <li><a href="#">>a sdfasdgsadlf; asd;lfgj asdgsadlf sd; asd;lfgj</a> </li> 
    <li><a href="#">>a sdg gj asdgsadlf; afg adfg asd;lkfalfgj</a></li> 
</ul> 
</body> 
</html>

來源

2011-12-09 Fred

我真的不明白。項目應該包裹在哪裏？ –

你可以通過刪除一些你的代碼來做到這一點。如果我理解正確的話，所有你需要的是這樣的：

ul { width:400px; } 
li { 
    list-style-type:none; 
    display:inline; 
    padding-left:20px 
}

下面是一個例子：http://jsfiddle.net/M9zqE/

來源

2011-12-09 19:07:14 motoxer4533

太棒了。感謝你們倆！我並沒有想到這個浮動導致內聯不起作用的事實。再次感謝！ – Fred

它是由不浮的項目（因此不從流中刪除它們）

見固定http://jsfiddle.net/pRCFR/

來源

2011-12-09 19:06:55 FelipeAls

使用CSS在水平列表中包裝每個項目

回答

相關問題