圆位置

要使圆的位置与List标题内联，请考虑将align-self: start应用于.circle元素：

.circle {
  …
  align-self: start;
}

字符串

连接线

对于连接圆之间的线，在每个<li>元素中有一个新的<div>元素：

<li>
  …
  <div class="line"></div>

型
将position: relative应用于每个<li>。这将使<li>元素成为我们下一步需要的位置容器：

.listicle li {
  …
  position: relative;
}

型
通过CSS使用.line元素绘制线条：

.line {
  position: absolute;
  top: 110px; /* = [30px .circle height] + [40px .circle padding-top] + [40px .circle padding-bottom] */
  bottom: 0;
  left: 55px; /* = ([15px .circle width] ÷ 2) + [40px .circle padding-left] */
  border-left: 1px solid red;
}

型
将flex-shrink: 0应用于.circle，使其宽度永远不会缩小，从而确保连接线始终相对于.circle元素居中：

.circle {
  …
  flex-shrink: 0;
}

型

.listicle {
  list-style: none;
  padding: 0;
  position: relative;
}

.listicle li {
  display: flex;
  align-items: center;
  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-bottom: 20px;
  align-self: start;
  flex-shrink: 0;
}

.line {
  position: absolute;
  top: 110px;
  bottom: 0;
  left: 55px;
  border-left: 1px solid red;
}

<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 class="line"></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 class="line"></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>

的字符串