CSS：无序列表对齐答案

【问题标题】：CSS: Unordered list alignmentCSS：无序列表对齐
【发布时间】：2013-03-22 06:23:31
【问题描述】：

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

在过去的 4 个小时里，我一直在尝试做这样的事情：

我正在尝试使列表显示每个“行”四个项目，其中两个跨度位于图像下方的中心。文本必须能够自动换行。 CSS 是一种很难掌握的野兽！

如果您查看 Fiddle，我的结果有些奇怪。文本较大的项目会导致插入空白...

【问题讨论】：

类似于放置标签inline。链接显示易于使用的教程htmldog.com/articles/tabs

标签： html css alignment html-lists

【解决方案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;}

应该这样做。比使用无序列表要容易得多，因为这样您就没有列表默认需要覆盖的任何样式。

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案3】：

请参考以下位置：

http://jsfiddle.net/wNrqu/

【讨论】：

【解决方案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;}

【讨论】：