如何让状态栏文本居中于圆点下方且保持连接线连贯？

我来帮你搞定这个布局问题！核心问题出在你原有的flex布局方向和文本定位逻辑上——用绝对定位虽然能把文本挪到下方，但没法自动居中，同时依赖flex:1的分段连线也会因为li的宽度变化出现断裂。下面是一个更稳定的实现方案：

核心思路 #

1. 用完整连线替代分段连线：给整个ul添加一条贯穿的蓝色横线，确保连线绝对连贯；
2. 垂直排列圆点与文本：把每个li设置为垂直flex布局，让文本自然出现在圆点下方，再通过align-items:center实现水平居中；
3. 等距分布圆点：用justify-content:space-between让所有圆点均匀分布在容器内。

修改后的完整代码 #

HTML（无需改动）

<div class="container">
  <ul class="status-bar">
    <li>
      <div>1</div>
      <div>foo</div>
    </li>
    <li>
      <div>2</div>
      <div>bar</div>
    </li>
    <li>
      <div>3</div>
      <div>baz</div>
    </li>
    <li>
      <div>4</div>
      <div>qux</div>
    </li>
    <li>
      <div>5</div>
      <div>blahblahblah</div>
    </li>
  </ul>
</div>

SCSS（关键修改部分）

.container {
  max-width: 100vw;
  width: 950px;
  background-color: lightgrey;
  height: 800px;
}

ul.status-bar {
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  display: flex;
  justify-content: space-between; // 实现圆点等距分布
  position: relative;
  padding: 40px 15px 0; // 为下方文本预留空间

  // 绘制贯穿整个列表的连接线
  &:before {
    content: "";
    position: absolute;
    top: 13px; // 垂直居中于黄色圆点（圆点高度25px，13px为中间位置）
    left: 15px; // 和ul的padding-left对齐
    right: 15px; // 和ul的padding-right对齐
    border-bottom: 1px solid blue;
  }
}

li {
  display: flex;
  flex-direction: column; // 垂直排列圆点和文本
  align-items: center; // 让圆点和文本水平居中
  position: relative;
  z-index: 1; // 让黄色圆点覆盖在连接线上方
}

li div:first-child {
  padding: 5px;
  height: 25px;
  width: 25px;
  text-align: center;
  line-height: 25px;
  border-radius: 50%;
  border: 1px solid black;
  background-color: yellow;
}

li div:last-child {
  margin-top: 8px; // 圆点和文本之间的间距
  text-align: center;
  width: max-content; // 让文本宽度自适应，避免不必要的换行（可根据需求调整）
}

关键调整说明 #

• 贯穿式连接线：通过ul:before绘制一条完整的横线，彻底避免分段连线的断裂问题；
• 垂直flex布局：li设置为flex-direction:column+align-items:center，让文本自动居中在圆点下方，不管文本长度如何（比如最后一个的blahblahblah也能完美居中）；
• 层级控制：z-index:1确保黄色圆点显示在连接线上方，视觉效果正确；
• 稳定的等距分布：justify-content:space-between让圆点自动均匀分布，无需手动计算间距。

这个方案不仅解决了你当前的问题，还让布局更稳定、响应式友好，后续调整圆点数量或文本内容都不会破坏整体效果。

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