html - 如何使用 HTML 和 CSS 将三位文本左、右、中对齐？

Question

我一直在尝试使用 HTML 和 CSS(没有 Flexbox 或 JS)让三位文本(样式看起来像按钮)在左、中和右对齐，但没有成功。如何实现？这就是我需要的:

这是我的代码:

#row1 {padding: 20px 20px 5px 20px;
           overflow: hidden; }

.button-container {display: block; text-align: center;}

.button-left {
    padding: 0 5px;
    text-align: center;
    border: 1px solid;
    float: left;
    font-size: 75%; }

.button-right {
    padding: 0 5px;
    text-align: center;
    border: 1px solid;
    float: right;
    font-size: 75%; }

.button-centre {
    padding: 0 5px;
    text-align: center;
    border: 1px solid;
    font-size: 75%; }

<div id="row1">
<div class="button-container">
<span class="button-left"><a href="#1">previous</a></span>
<span class="button-centre"><a href="#2">issue</a></span>
<span class="button-right"><a href="#3">next</a></span>
</div><!--close button-container">
</div><!--close r1-->

Answer 1

Flexbox 是解决此类问题的理想选择:

#row1 {
  padding: 20px 20px 5px 20px;
  overflow: hidden;
}

.button-container {
  display: flex; /* displays flex-items (children) inline */
  justify-content: space-between; /* MDN: The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. */
  align-items: center; /* centers them vertically */
}

.button-left {
  padding: 0 5px;
  text-align: center;
  border: 1px solid;
  font-size: 75%;
}

.button-right {
  padding: 0 5px;
  text-align: center;
  border: 1px solid;
  font-size: 75%;
}

.button-centre {
  padding: 0 5px;
  text-align: center;
  border: 1px solid;
  font-size: 75%;
}

<div id="row1">
  <div class="button-container">
    <span class="button-left"><a href="#1">previous</a></span>
    <span class="button-centre"><a href="#2">index</a></span>
    <span class="button-right"><a href="#3">next</a></span>
  </div>
</div>

没有 Flexbox 的替代方案:

* {margin: 0; padding: 0; box-sizing: border-box}

#row1 {padding: 20px 20px 5px 20px}

.button-container {position: relative}

.button-left {
    position: absolute;
    left: 0;
    padding: 0 5px;
    text-align: center;
    border: 1px solid;
    font-size: 75%; }

.button-right {
    position: absolute;
    right: 0;
    padding: 0 5px;
    text-align: center;
    border: 1px solid;
    font-size: 75%; }

.button-centre {
    position: absolute;
    left: calc(50% - 17px);
    padding: 0 5px;
    text-align: center;
    border: 1px solid;
    font-size: 75%; }

<div id="row1">
  <div class="button-container">
    <span class="button-left"><a href="#1">previous</a></span>
    <span class="button-centre"><a href="#2">issue</a></span>
    <span class="button-right"><a href="#3">next</a></span>
  </div>
</div>

所做的更改:.button-container {position: relative}，还为所有 children 添加了 position: absolute 和适当的 left 和 right properties 的 >values，对于 middle child value left property calc(50% - 17px) 是根据它的宽度计算的( padding 和 border 包括)，即 34px 除以 2 并从 50% 中扣除。