如何实现文本后接两侧自适应破折号的居中单行按钮布局

直接使用Flex弹性布局即可完成需求，无需硬编码破折号数量，天然支持单行对齐，两侧破折号自动等宽撑满剩余空间。

核心实现思路 #

• 外层容器设置为弹性盒，强制所有子元素沿水平方向排列、垂直居中对齐，从根源解决不同元素不在同一行的问题
• 前置文本、按钮设置为不收缩，避免内容被挤压变形或换行
• 按钮两侧各放一个空填充元素，设置弹性增长属性平分所有剩余宽度，填充区域用样式生成破折号效果，比手动写入-字符更整齐，不会出现半截破折号的显示问题

完整代码 #

<div class="dash-line">
  <span class="pre-text">Some text</span>
  <span class="dash"></span>
  <button class="center-btn">Centered Button</button>
  <span class="dash"></span>
</div>

.dash-line {
  width: 100%;
  display: flex;
  align-items: center;
  column-gap: 12px; /* 控制文本、破折号、按钮的间距，可按需调整 */
}

.pre-text {
  flex-shrink: 0;
  font-size: 16px;
}

.dash {
  flex: 1; /* 两个dash元素自动平分剩余宽度 */
  height: 1px;
  /* 渐变生成均匀破折号，修改参数可调整破折号长短、间距 */
  background: repeating-linear-gradient(
    to right,
    currentColor,
    currentColor 8px,
    transparent 8px,
    transparent 16px
  );
}

.center-btn {
  flex-shrink: 0;
  padding: 6px 16px;
  cursor: pointer;
}

如果需要使用真实-字符作为填充，可替换.dash的样式为以下代码，在标签内写入足量-即可，超出部分会自动隐藏：

.dash {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}

效果特性 #

• 容器宽度、前置文本长度、按钮尺寸变化时，两侧破折号始终保持等宽，按钮自动居中
• 所有元素默认单行展示，不会出现错位换行
• 破折号样式可灵活调整，无需手动增减破折号数量

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