如何实现同一行三个inline元素分别左对齐、居中、右对齐？

最可靠的方案是使用Flex布局，以下是两种精准实现的写法，你之前可能是Flex属性配置有误导致无效：

写法一：自动分配空间实现两端+居中 #

HTML结构 #

<div class="container">
  <span class="left">左对齐元素</span>
  <span class="center">居中元素</span>
  <span class="right">右对齐元素</span>
</div>

CSS样式 #

.container {
  display: flex;
  justify-content: space-between; /* 核心属性：元素两端对齐，中间自动填充空白 */
  align-items: center; /* 可选：让元素垂直居中，按需调整 */
  width: 100%; /* 必须设置父容器宽度，否则Flex布局无法生效 */
}

写法二：强制中间元素严格居中（不受左右元素宽度影响） #

如果左右元素宽度差异大，需要中间元素始终在容器正中心，用这个写法：

.container {
  display: flex;
  width: 100%;
  align-items: center;
}

.left {
  margin-right: auto; /* 自动占据左侧到中间的剩余空间，将中间元素挤到中心 */
}

.right {
  margin-left: auto; /* 自动占据中间到右侧的剩余空间 */
}

备选方案：Grid布局 #

.container {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* 左右列分配剩余空间，中间列自适应内容 */
  align-items: center;
  width: 100%;
}

.right {
  justify-self: end; /* 强制右侧元素靠右对齐 */
}

你之前方法无效的可能原因 #

• 使用position时未给父容器设置position: relative，或子元素定位值计算错误导致错位/换行
• 修改父容器display后未搭配对应布局属性（比如Flex必须配合justify-content）
• text-align无法单独控制单个inline元素的对齐，浮动方案易引发高度塌陷或换行问题
• 切换inline-block/table-cell时，未给父容器设置配套布局规则（比如table布局需要父容器display: table）

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