0

我有 3 个 li 项目 - 每个项目的宽度为 33.3%。我试图margin-right在每个之间创建一个间隙<li>- 但是额外的边距使总<li>宽度超过 100% 并在新行上分解。

我可以用一些边框方法对此进行排序吗？试图在全球范围内应用它，但没有运气。

http://codepen.io/anon/pen/jbazaN

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.content {
  width: 700px;
  background: gray;
  padding: 20px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  float: left;
  width: 33.3%;
  margin: 0 20px 0 0;
  background: blue;
}
4

2 回答 2

1

您需要Calc 功能 

ul li {
    float: left;
    width: calc(33.3% - 20px);/*add this*/
    margin: 0 20px 0 0;
    background: blue;
}

给你

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.content {
  width: 700px;
  background: gray;
  padding: 20px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  float: left;
  width: calc(33.3% - 20px);
  margin: 0 20px 0 0;
  background: blue;
}
<div id="wrapper">
  <div class="content">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <div style="clear: both;"></div>
    </ul>
  </div>

</div>

考虑添加前缀或使用lea verou的 prefixfree。

更新：

要删除无序列表中每隔三个列表项的边距，您将需要not和nth选择器ul li:not(:nth-child(3n+3))

ul li {
  float: left;
  width: 33.3%;
  /*margin: 0 20px 0 0;*/
  background: blue;
}
ul li:not(:nth-child(3n+3)){margin: 0 20px 0 0;}

现场演示

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.content {
  width: 700px;
  background: gray;
  padding: 20px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  float: left;
  width: calc(33.3% - 20px);
  /*margin: 0 20px 0 0;*/
  background: blue;
}
ul li:not(:nth-child(3n+3)){margin: 0 20px 0 0}
<div id="wrapper">
  <div class="content">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <div style="clear: both;"></div>
    </ul>
  </div>

</div>

或写它然后覆盖它以避免像这样的非选择器

ul li {
  float: left;
  width: calc(33.3% - 20px);
  margin: 0 20px 0 0;
  background: blue;
}
ul li:nth-child(3n+3){margin: 0 0px 0 0}
于 2015-10-18T11:39:17.873 回答
0

如果你想支持像 IE8 这样的旧浏览器，你可以通过做一点数学来使用这个方法。

在您的情况下，您有 3 个项目，您需要为前两个项目添加 20px 的边距，总计 40px 。

现在从容器中减去这个值（将是 660px ）然后除以项目数，

(660/3 = 220px) 每个项目的宽度，最后一步我们需要得到项目宽度的百分比 = 新项目宽度 / 旧容器宽度 [ 220/700 = .314286 ( 31.429% ) ]。

最后，我们通过向其添加类或使用这一类来很好地从最后一项中删除边距

ul li + li + li { margin-right: 0 }因为 IE8 及更低版本不支持 last-child 选择器

最后，您的代码将是：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.content {
  width: 700px;
  background: gray;
  padding: 0px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  float: left;
  width: 31.429%;
  margin: 0 20px 0 0;
  background: blue;
}

ul li+li+li {
  margin-right:0
}
<div id="wrapper">
  <div class="content">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <div style="clear: both;"></div>
    </ul>
  </div>

</div>

参考： IE8的第n个，第一个孩子和最后一个孩子的替代品，我可以使用吗

于 2015-12-18T17:59:45.193 回答