如何使 4 件物品完美地放入容器中答案

【问题标题】：How make 4 items fit perfectly inside the container如何使 4 件物品完美地放入容器中
【发布时间】：2015-04-25 18:37:13
【问题描述】：

Codepen - http://codepen.io/anon/pen/ZGYQej

我需要使 4 个项目完全适合一个容器，每个项目必须有 5px 的边距。我正在尝试做，但它从来都不是完美的，我所说的完美是什么意思？第一项应该在最左边，最后一项在最右边，但四项需要相距5px。

代码：

HTML：

<section class="statistics">
        <div class="container">
          <h2 class="statistics__title">Estátisticas</h2>
          <ul class="statistics__list">
            <li class="statistics__item"></li>
            <li class="statistics__item"></li>
            <li class="statistics__item"></li>
            <li class="statistics__item"></li>
          </ul>
        </div>
</section>

CSS：

.container {
  box-sizing: content-box;
  padding-left: 3%;
  padding-right: 3%;
  margin-left: auto;
  margin-right: auto;
}
.statistics__title {
  margin: 15px 15px 15px 0;
  font-weight: lighter;
}
.statistics {
  width: 100%;
}
.statistics__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.statistics__item {
  margin: 0 5px;
  display: inline-block;
  width: 23%;
  height: 230px;
  background-color: #FFF;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
}

【问题讨论】：

我没有看到这里的问题，¿您希望它是响应式的还是静态的？
static.. 容器并不完美，这就是问题所在。
尝试在容器中添加：min-width: 900px，使用百分比宽度的问题在于它的意思是根据屏幕大小而改变，如果你想保持相同的布局不要使用它，或者将 min-width 添加到容器中

标签： html css

【解决方案1】：

尝试在.statistics__item 上使用伪类:last-child

这样你可以给除了最后一个元素之外的所有元素margin-right:5px，导致第一个元素在最左边，最后一个元素在最右边，而四个元素以5px的边距分隔。

box-sizing:content-box;
  padding-left:3%;
  padding-right:3%;
  margin-left:auto;
  margin-right:auto;
}
.statistics__title {
  margin: 15px 15px 15px 0;
  font-weight: lighter;
}
.statistics {
  width: 100%;
}
.statistics__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.statistics__item {
  margin-right: 5px;
  display: inline-block;
  width: 23%;
  height: 230px;
  background-color: #FFF;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
}
.statistics__item:last-child {
  margin-right: 0px;
}

<section class="statistics">
  <div class="container">
    <h2 class="statistics__title">Estátisticas</h2>
    <ul class="statistics__list">
      <li class="statistics__item"></li>
      <li class="statistics__item"></li>
      <li class="statistics__item"></li>
      <li class="statistics__item"></li>
    </ul>
  </div>
</section>

【讨论】：

第一个孩子不应该也有margin-left: 0px吗？
没有。使用margin-right:5px 时将没有margin-left。但你可以用它来确定。

【解决方案2】：

这个可能的解决方案涉及 CSS flexbox，查看下面的演示。

.statistics__title {
    background: silver;
}
.statistics__list {
    list-style: none;
    padding: 0;
    margin: 0 -5px; /*get rid of the left margin on 1st item, and right margin on 4th item*/
    display: flex;
}
.statistics__item {
    background: gold;
    flex-grow: 1;
    margin: 0 5px;
}

<section class="statistics">
    <div class="container">
        <h2 class="statistics__title">Estátisticas</h2>
        <ul class="statistics__list">
            <li class="statistics__item">1</li>
            <li class="statistics__item">2</li>
            <li class="statistics__item">3</li>
            <li class="statistics__item">4</li>
        </ul>
    </div>
</section>

JSFiddle： http://jsfiddle.net/b0t9m95L/

【讨论】：

注意：标题上的银色背景仅用于测量目的，以查看/知道黄色项目在任何窗口大小上动态占据整个宽度 :)