html - CSS:无序列表对齐

Question

考虑以下 Fiddle:http://jsfiddle.net/wNrqu/

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

我试图让列表每“行”显示四个元素，两个跨度在图像下方居中。文本必须能够自动换行。 CSS 是一种难以掌握的怪兽!

如果您查看 Fiddle，我的结果有些奇怪。具有较大文本的元素会导致插入空白间隙...

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

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