安装宽度，如显示:内联

Question

我想做响应中心的框列表。

所以我使用了text-align:center，但是最后一行也是居中的：http://jsfiddle.net/NWmpL/1/

我试图使用与<li>紧密相关的附加包装，

但是，我所知道的“紧密围绕”内容的唯一方法是使用display:inline。

http://jsfiddle.net/NWmpL/2/，但在这里，text-align:left不工作

而且width:200px应该是灵活的(因为在我的例子中它是浏览器的宽度)

还有其他方法来“紧密包围”内容吗？或者还有其他的解决办法？

提前谢谢。

更清楚：http://jsfiddle.net/NWmpL/6/

我想要改变这个

到这个

​

Answer 1

您应该使用display:inline-block进行布局，而不是使用display:inline。

display:inline只适用于文本内容；如果元素中有任何块内容，并且需要内联行为，则应该始终使用inline-block。

所以我去找你的小提琴，把inline换成了inline-block。

猜怎么着..。这解决了问题，现在看起来就像你想要的那样。

请参阅http://jsfiddle.net/NWmpL/8/

您也可以考虑使用float:left来实现这种布局，但是既然我们已经得到了inline-block的工作答案，我就不提了。

Answer 2

添加

float:left;

至

.center li { }

FIDDLE

Answer 3

ul.center {
    display: table;
    margin: 0 auto;
    width:250px; }

ul.center li {
    display: block;
    float: left;
    width:75px; height:75px;    
    margin: 2px;
    list-style: none;
    background-color: #CCC; }