水平排列列表项

Question

好的，所以我错过了一些东西，但我似乎无法排列一个简单的 ul 列表项列表，以便它们拉伸父 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

使用: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;
}

如果您必须坚持使用 92 像素的宽度，您将无法正确对齐。边距需要填充的剩余空间是 32px，不能被 3 整除。

Answer 3

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

.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 4

您的带有边距的框太大。请注意，除了指定的height 和width 之外，还有填充。看到它在http://jsfiddle.net/37E55/32上工作