Question

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

尝试使用:last-child

上的伪班.statistics__item

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何使4件物品完美贴合在容器内

2 个答案: