如何用CSS实现三个span元素左、中、右对齐布局？

问题分析 #

你当前的代码无法实现预期效果的核心原因：

• #spedizioniGratis 设置的 text-align:center 仅作用于span内部文本，但该span未占据容器中间的可用空间，视觉上不会呈现居中效果
• float:right 让第三个元素靠右，但会使其脱离文档流，导致中间元素无法与左右元素正确分布，还可能引发父容器高度塌陷问题

推荐解决方案：Flexbox布局 #

Flexbox是当前实现这种分布布局最简洁、可靠的方式，代码调整如下：

HTML（可保留原结构）

<div class="barraServizioClienti">
  <p>
    <span id="servizioClienti"><a href="home.html">Servizio Clienti</a></span>
    <span id="spedizioniGratis">Spedizioni e resi gratuiti</span>
    <span id="trovaci"><a href="home.html">Trova il negozio più vicino</a></span>
  </p>
</div>

CSS

.barraServizioClienti {
  width: 100%;
  height: 27px;
  padding: 4px 15px;
  background-color: #121212;
  display: flex; /* 启用Flexbox布局 */
  align-items: center; /* 垂直居中元素 */
  justify-content: space-between; /* 自动分配空间，实现左、中、右分布 */
}

/* 统一设置文本样式，简化代码 */
.barraServizioClienti span,
.barraServizioClienti a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 100;
  color: #ffffff;
}

方案说明 #

• display:flex 将容器转为Flex容器，子元素自动成为Flex项目
• justify-content:space-between 会让第一个项目靠左，最后一个项目靠右，中间项目自动填充剩余空间并居中
• align-items:center 确保所有元素在垂直方向上居中对齐，无需额外设置vertical-align

兼容旧浏览器的备选方案（定位法） #

如果需要兼容不支持Flexbox的旧浏览器，可以使用绝对定位实现：

.barraServizioClienti {
  width: 100%;
  height: 27px;
  padding: 4px 15px;
  background-color: #121212;
  position: relative;
  display: flex; /* 用于垂直居中，也可以用line-height:27px替代 */
  align-items: center;
}

#servizioClienti {
  position: absolute;
  left: 15px; /* 与父容器padding值保持一致 */
}

#spedizioniGratis {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
}

#trovaci {
  position: absolute;
  right: 15px; /* 与父容器padding值保持一致 */
}

.barraServizioClienti span,
.barraServizioClienti a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 100;
  color: #ffffff;
}

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