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;}