如何实现三组文本左、中、右对齐且同行显示？

方法1：Flexbox布局（推荐） #

这是最简洁且兼容性优异的方案，通过Flex容器控制子元素分布：

HTML结构

<div class="stats-container">
  <div class="credit-hour">Credit Hour: 99</div>
  <div class="gpa">GPA: 4</div>
  <div class="quantity-point">Quantity Point: 87</div>
</div>

CSS样式

.stats-container {
  display: flex;
  width: 100%; /* 确保容器占满可用宽度 */
}

.credit-hour {
  flex: 1; /* 子元素平分容器宽度 */
  text-align: left;
}

.gpa {
  flex: 1;
  text-align: center;
}

.quantity-point {
  flex: 1;
  text-align: right;
}

方法2：Grid布局 #

利用Grid的三列布局实现精准对齐：

CSS样式（HTML结构同上）

.stats-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 三等分列宽 */
  width: 100%;
}

.credit-hour { text-align: left; }
.gpa { text-align: center; }
.quantity-point { text-align: right; }

方法3：inline-block + 文本对齐（兼容旧浏览器） #

如果需要适配老旧浏览器，可采用此方案：

HTML结构

<div class="stats-container">
  <span class="credit-hour">Credit Hour: 99</span>
  <span class="gpa">GPA: 4</span>
  <span class="quantity-point">Quantity Point: 87</span>
</div>

CSS样式

.stats-container {
  width: 100%;
  text-align: justify;
}

.stats-container:after {
  content: "";
  display: inline-block;
  width: 100%;
}

.credit-hour, .gpa, .quantity-point {
  display: inline-block;
  width: 33.33%;
}

.credit-hour { text-align: left; }
.gpa { text-align: center; }
.quantity-point { text-align: right; }

问题排查提示 #

你之前的代码大概率是给每个数据项默认设置了display: block（div标签默认属性），导致元素独占一行。只需通过上述布局方式修改容器或元素的显示属性，即可解决换行问题。

内容的提问来源于stack exchange，提问作者Raymond Chen