CSS：無序列表排列

Question

考慮以下小提琴：http://jsfiddle.net/wNrqu/

對於過去的4小時裏，我一直在試圖做這樣的事情：

我試圖使列表顯示四個項目每個「行」，兩個跨度位於圖像下方。文字必須能夠通過單詞包裝。 CSS是掌握一個棘手的野獸！

如果您檢查小提琴，我的結果有點奇怪。與較大的文本項導致要插入一個空白的差距...

Answer 1

<div id="container"> 
    <div><img src="kitten.png" />Cute Kitten<br />yes</div> 
    ...... 
</div> 

在你的CSS

然後：

#container {width: 1000px;} 
#container > div {display: inline-block; width: 250px; text-align: center;} 

應該這樣做。比使用無序列表要容易得多，因爲那樣你就沒有任何默認列表需要重寫的樣式。

Answer 2

請參考以下位置：

http://jsfiddle.net/wNrqu/

Answer 3

如果我這樣做的CSS，我不會使用順序列表，我將使用DIV。也許這會幫助你。

<div id="container"> 
<div class="row clearfix"> 
    <div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p> <p>yes</p></div> 
    <div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p><p>yes</p></div> 
    <div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p><p>yes</p></div> 
    <div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p><p>yes</p></div> 
</div> 
</div> 

然後在CSS

#container {width:1000px;} 
.img {width:133px; height:200px; margin-right:20px;} 
.img p{text-align:center;} 
.fleft{float:left;} 
.clearfix:before, 
.clearfix:after { 
content: ""; 
display: table; 
} 

Answer 4

感謝您的幫助......雖然我起初不問這個問題。

我改變了CSS從

#container {width: 1000px;} 
#container > div {display: inline-block; width: 250px; text-align: center;} 

到：

#container{margin: 0 auto;width: 1000px;} 
#container div {display: inline-block; width: 150px; text-align: center;}