Question

好的，所以我错过了一些东西，但我似乎无法排列一个简单的列表项列表，以便它们拉伸其父div的整个宽度。以下是我的问题示例http://jsfiddle.net/37E55/17/。

我要做的是让灰色框连续排成一行，这样第一个框的左边缘与#wrapper div的左边缘内联，最后一个框的右边缘与#wrapper div的右手边缘。

我已经尝试通过给它们一个绝对的位置来成功排列盒子但是有没有办法使用我缺少的边距和填充的组合？

#wrapper {
 width: 400px;
 height: 300px;
 background-color:#F0F0F0;
 margin: 10px auto;    
}

.box {
 width: 92px;
 height:92px;
 background-color:#333;
 margin:0px 10px 10px 0px;
 float:left;
}

<div id="wrapper">

<ul>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
</ul>

</div>

Answer 1

我知道有一种方法可以使用inline-block而不是浮动（如果您不必支持过度使用的浏览器）。

Here's a fiddle demo！

li没有应用边距，它们均匀地位于和区域中。我跟着this guide。

ul {
    font-size: 0 !important; /* remove physical spaces between items */
    text-align: justify;
    text-justify: distribute-all-lines; /* distribute items in IE */
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* fully justify all items in browsers other than IE */
ul:after {
    content: "";
    display: inline-block;
    width: 100%;
}

ul li {
    text-align: left; /* customize to suit */
    vertical-align: top; /* can customize to suit */
    display: inline-block;
    width: 31.3%; /* optional, only need for text content to wrap */
    margin-bottom: 1em; /* optional, customize to suit */
}

Answer 2

您需要做的第一件事是删除最后一个元素的右边距。

.box:last-child { margin-right:0; }

除此之外，有时您无法根据元素的空间和容器大小来调整元素，例如，精确的均匀边距。有时您可以在（例如）每隔一个元素上应用不同的边距，以使布局看起来“均匀”，但是要处理空间不足，例如：

.box:nth-of-type(2n) { margin-right:14px } /* add extra pixels to right margin of even elements*/

在你的情况下，只有一个盒子需要额外的边距，比如第一个。 Here's how I did it（颜色对比度增加只是为了让它更容易看到）。

.box {
  width: 90px;
  height:90px;
  background-color:blue;
  margin:0px 13px 10px 0px;
  float:left;
}

.box:last-child {
    background:green;
    margin-right:0;
}

.box:first-child {
    background:yellow;
    margin-right:14px;
}

干杯

Answer 3

使用:last-child选择最后一个框并将margin-right: 0应用于该框。确保剩余的边距正确填充空间。

.box {
    width: 92px;
    height:92px;
    background-color:#333;
    margin:0px 10px 10px 0px;
    float:left;
}

.box:last-child {
    margin-right: 0;
}

如果你必须坚持92px的宽度，你将无法使它们正确对齐。边距需要填充的剩余空间为32px，不会均匀分为3。

Answer 4

边框太大了。请注意，填充是指定height和width的补充。请参阅http://jsfiddle.net/37E55/32

水平排列列表项

4 个答案: