0

好的，我错过了一些东西，但我似乎无法排列一个简单的 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>​
4

4 回答 4

2

我知道有一种方法可以inline-block代替浮动（如果您不必支持过于旧的浏览器）。

这是一个小提琴演示！

li没有应用边距，它们均匀地分布在区域中并紧贴边界。我按照这个指南。

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 */
}
于 2012-11-23T21:39:46.730 回答
1

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

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

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

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

但是，在您的情况下，只有一个框需要额外的边距，例如第一个。 这是我的做法（增加颜色对比度只是为了更容易看到）。

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

干杯

于 2012-11-23T20:46:44.557 回答
1

用于: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 整除。

于 2012-11-23T20:55:09.970 回答
0

您的边距框太大。请注意，填充是在指定的heightand之外的width。看到它在http://jsfiddle.net/37E55/32上工作

于 2012-11-23T20:47:04.643 回答