带编号圆形与列表标题对齐及圆形间连线实现需求

需求解决思路 #

1. 圆形与列表标题对齐：
   原代码里列表项用align-items: center会让圆形和整个列表项垂直居中，改成align-items: flex-start让内容顶部对齐，再微调圆形的margin-top，就能让它和标题文字的基线对齐。

2. 圆形间添加连线：
   用父容器的伪元素绘制一条贯穿左侧的垂直连线，让圆形覆盖在连线上，自然形成圆形间的连线效果，同时完全兼容长文本换行的情况，不会出现连线断裂。

修改后的完整代码 #

CSS 代码

.listicle {
  list-style: none;
  padding: 0;
  position: relative;
  padding-left: 60px; /* 预留连线和圆形的位置 */
}

/* 绘制左侧垂直连线 */
.listicle::before {
  content: "";
  position: absolute;
  left: 55px; /* 对应圆形的中心位置 */
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #3498db;
}

.listicle li {
  display: flex;
  align-items: flex-start; /* 改为顶部对齐 */
  margin-bottom: 40px; /* 增加间距让连线更清晰 */
  position: relative;
}

.circle {
  width: 30px;
  height: 30px;
  background-color: #3498db;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 30px;
  margin-right: 10px;
  padding: 40px;
  margin-top: 4px; /* 微调让圆形和标题基线对齐 */
  position: relative;
  z-index: 1; /* 确保圆形覆盖在连线上 */
}

/* 移除最后一项的底部间距，避免多余连线 */
.listicle li:last-child {
  margin-bottom: 0;
}

HTML 代码

<section class="text-black fs-5" style="font-family: Cambria, serif, sans-serif;">
  <div class="container-fluid">
    <h1>Deposits and Withdrawls for Post Office Savings Account</h1>
    <ul class="listicle">
      <li>
        <div class="circle">1</div>
        <div>Minimum Deposit to Open:
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>  
      </li>
      <li>
        <div class="circle">2</div>
        <div>Subsequent Deposits:
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>  
      </li>
      <li>
        <div class="circle">3</div>
        <div>Minimum Deposit to Open:
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>  
      </li>      
    </ul>  
  </div>  
</section>

效果说明 #

• 圆形现在会和列表标题的基线对齐，不再居中到整个列表项的垂直中点；
• 左侧垂直连线贯穿所有圆形，圆形覆盖在连线上形成连贯的“编号+连线”视觉效果，无论文本多长、换多少行，连线都不会断裂；
• 最后一个列表项移除了底部间距，避免连线多出一截。

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