响应式带竖线数字列表的HTML&CSS实现问题求助

问题描述 #

我希望实现一个时间线列表，要求：

• 数字徽章位于左侧，竖线在徽章后方
• 文字内容在徽章右侧排列
• 整体布局支持响应式
  但现有代码导致竖线与文字、数字重叠，无法达到预期效果。

修复后的代码 #

HTML 代码 #

<div class="info-timeline">
  <ul>
    <li>
      <div class="timeline-item">
        <span class="timeline-circle">
          <span class="number">1</span>
        </span>
        <div class="timeline-content">
          <span class="timeline-header">31/12/2016 11:28 AM (John Doe):</span>
          <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>
      </div>
    </li>
    <li>
      <div class="timeline-item">
        <span class="timeline-circle">
          <span class="number">2</span>
        </span>
        <div class="timeline-content">
          <span class="timeline-header">31/12/2016 11:28 AM (Maria Harry Potter):</span>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.</p>
        </div>
      </div>
    </li>
    <li>
      <div class="timeline-item">
        <span class="timeline-circle">
          <span class="number">3</span>
        </span>
        <div class="timeline-content">
          <span class="timeline-header">31/12/2016 11:28 AM (John Faf Doe):</span>
          <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.</p>
        </div>
      </div>
    </li>
    <li>
      <div class="timeline-item">
        <span class="timeline-circle">
          <span class="number">4</span>
        </span>
        <div class="timeline-content">
          <span class="timeline-header">31/12/2016 11:28 AM (John Doe):</span>
          <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.</p>
        </div>
      </div>
    </li>
  </ul>
</div>

CSS 代码 #

.info-timeline ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline-item {
  display: flex;
  gap: 1rem;
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: 2rem;
}

.timeline-circle {
  position: absolute;
  left: 0;
  top: 0;
  border: 2px solid #38b6ff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #38b6ff;
  z-index: 2;
}

.number {
  background-color: #0097b2;
  line-height: 25px;
  padding: 6px;
  border-radius: 100%;
  color: white;
  font-size: 0.9rem;
}

/* 竖线样式 */
.info-timeline ul li:not(:first-of-type) .timeline-item::before {
  content: '';
  position: absolute;
  left: 19px;
  top: -2rem;
  width: 2px;
  height: calc(2rem + 40px);
  background-color: #999;
  z-index: 1;
}

.timeline-content {
  flex: 1;
}

.timeline-header {
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
}

.timeline-content p {
  margin: 0;
  color: #333;
  line-height: 1.5;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .timeline-item {
    padding-left: 2rem;
    gap: 0.8rem;
  }
  
  .timeline-circle {
    width: 35px;
    height: 35px;
  }
  
  .number {
    padding: 4px;
    font-size: 0.8rem;
  }
  
  .info-timeline ul li:not(:first-of-type) .timeline-item::before {
    left: 16.5px;
    height: calc(2rem + 35px);
  }
}

关键修改说明 #

1. 结构重构：给每个列表项添加.timeline-item容器，用Flex布局分离徽章和内容区域，避免元素重叠
2. 定位调整：将.timeline-circle设为绝对定位，固定在列表项左侧，通过z-index控制层级，确保竖线始终在徽章后方
3. 竖线修正：把竖线生成器移到.timeline-item上，调整位置使其精准对齐徽章中心，避免和文字重叠
4. 响应式适配：添加媒体查询，在小屏幕上调整徽章尺寸和间距，保证布局可用性

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