html - 如何将 3 li 元素与 33.3% + margin-right 保持在同一行？边界框？

Question

我有 3 个 li 元素——每个元素的宽度为 33.3%。我正在尝试创建一个 margin-right每个之间的差距 <li> - 然而，额外的 margin 使总数达到<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;
}

Answer 1

您需要 Calc function

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>

考虑添加前缀或使用 prefixfree来自 le verou。

更新:

要删除无序列表中每隔三个列表项的边距，您需要 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}