如何使用HTML、CSS按顺序排列音频按钮并实现三个按钮左中右分布？

优先使用CSS Flexbox布局实现，无需额外JavaScript代码，适配性更强。 #

基础HTML结构 #

<!-- 外层容器 -->
<div class="btn-container">
  <button class="icon-btn">图标按钮1</button>
  <button class="icon-btn">图标按钮2</button>
  <button class="icon-btn">图标按钮3</button>
</div>

核心CSS代码 #

给外层容器添加Flex相关配置即可：

.btn-container {
  display: flex;
  /* 子元素水平两端对齐，自动分配空白区域 */
  justify-content: space-between;
  /* 可选：垂直方向居中对齐所有按钮 */
  align-items: center;
  /* 可选：设置容器宽度占满父级/整行 */
  width: 100%;
}

如果需要兼容IE9及更早版本，可以使用浮动+定位的方案：

.btn-container {
  position: relative;
  width: 100%;
}
/* 清除浮动 */
.btn-container::after {
  content: "";
  display: block;
  clear: both;
}
.icon-btn:first-child {
  float: left;
}
.icon-btn:nth-child(2) {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.icon-btn:last-child {
  float: right;
}

方案说明 #

• Flex方案无需处理浮动清除、定位偏移问题，窗口尺寸变化时会自动调整间距，是当前最优方案。
• 如果你的按钮宽度不固定，浮动+定位方案可能出现中间按钮和两侧按钮重叠的问题，更推荐使用Flex方案。

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