宽度为 33.33% 的 3 个元素超过 100%？

Question

我有一个包含 3 个元素 (h2) 的 div。 div 是 100%，但是当我将 div 内每个 h2 的宽度设置为 33.33% 时，第 3 个 div 将下降一行。 33% 有效，但我还剩下额外的 space，这几乎不引人注意，但对我来说仍然是个问题。我该如何解决这个问题，使 3 个 h2 适合 100% div，以便第一个 h2 向左对齐，第二个居中居中，最后一个向右对齐？甚至不必使用数字，例如 33.33%?

这是我目前拥有的：

HTML:

<div class="col-md-12 bottomPadding">
   <h2 class="floatLeftBottom"><a href="/">Edit</a></h2>
   <h2 class="floatCenterBottom"><a href="/">Delete</a></h2>
   <h2 class="floatRightBottom"><a href="#">Move up</a></h2>
</div>

CSS:

.floatLeftBottom {
    display: inline-block;
    width: 33%;
    text-align: left;
    padding-bottom: 10px;
}

.floatCenterBottom {
    display: inline-block;
    width: 33%;
    text-align: center;
    padding-bottom: 10px;
}

.floatRightBottom {
    display: inline-block;
    width: 33%;
    text-align: right;
    padding-bottom: 10px;
}

picture

Answer 1

我推荐学习使用 flexbox。它真的很省时，并且有很好的浏览器支持

CSS:

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.item {
    padding-bottom: 10px;
}

HTML:

<div class="col-md-12 flex bottomPadding">
   <h2 class="item"><a href="/">Edit</a></h2>
   <h2 class="item"><a href="/">Delete</a></h2>
   <h2 class="item"><a href="#">Move up</a></h2>
</div>

Answer 2

有几种方法可以解决这个问题，我的偏好是使用 flexbox 来提高响应能力。

.bottomPadding {
  display: flex;
  width: 100%;
}

.floatLeftBottom,
.floatCenterBottom,
.floatRightBottom {
  width: calc(100% / 3);
}

.floatLeftBottom {
  text-align: left;
}
.floatCenterBottom {
  text-align: center;
}
.floatRightBottom {
  text-align: right;
}

<div class="col-md-12 bottomPadding">
  <h2 class="floatLeftBottom"><a href="/">Edit</a></h2>
  <h2 class="floatCenterBottom"><a href="/">Delete</a></h2>
  <h2 class="floatRightBottom"><a href="#">Move up</a></h2>
</div>

宽度为 33.33% 的 3 个元素超过 100%？

3 elements with 33.33% width exceed 100%?

html

css

center