适合显示的宽度：内联

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

Answer 4

检查更新的小提琴： http://jsfiddle.net/4t6ha/2/

尝试这种不同的方法：

CSS：

.holder
{
width:300px;
border:1px dotted #000;
float:left;
padding:5px 5px;
}

ul
{
list-style:none;
}

li
{
display:inline-block;
height:30px;
width:30px;
background:#dedede;
margin:2px;
float:left;
padding:10px;
margin-bottom:5px;
}