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

如果我正在做这个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 3

请参阅以下位置：

http://jsfiddle.net/wNrqu/

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