0

我想做响应式居中的盒子列表。
所以我使用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/

我想把这个改成 在此处输入图像描述 这个在此处输入图像描述

4

4 回答 4

1

您应该display:inline-block用于布局，而不是display:inline.

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

所以我去了你的小提琴并将其更改inline为inline-block.

猜猜是什么……解决了问题；它现在看起来像您想要的那样。

见http://jsfiddle.net/NWmpL/8/

您也可以考虑使用float:left来实现这种布局，但由于我们已经得到了一个有效的答案inline-block，所以我会保留它。

于 2013-08-06T11:47:17.563 回答
0

添加

float:left;

至

.center li { }

小提琴

于 2013-08-06T09:13:05.970 回答
0 
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; }
于 2013-08-06T09:13:23.423 回答
0

检查更新的小提琴：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;
}
于 2013-08-06T09:15:48.883 回答