带连接线的响应式CSS时间轴开发：适配横竖屏布局

没问题，我来帮你搞定这个响应式时间轴！基于你给出的HTML结构，我会补充必要的类名和CSS样式，完美实现横屏横向自适应、竖屏纵向排列的效果：

优化后的HTML结构 #

给父容器添加类名方便样式控制，同时补全了示例内容：

<ul class="timeline">
  <li>
    <span class="mark"></span>
    <h3>Step 1</h3>
    <p>Some text that describes text 1</p>
  </li>
  <li>
    <span class="mark"></span>
    <h3>Step 2</h3>
    <p>Some text that describes text 2</p>
  </li>
  <li>
    <span class="mark"></span>
    <h3>Step 3</h3>
    <p>Some text that describes text 3</p>
  </li>
</ul>

核心CSS样式 #

通过媒体查询实现响应式切换，同时用伪元素构建时间轴线：

/* 基础重置与容器样式 */
.timeline {
  list-style: none;
  margin: 2rem auto;
  padding: 0;
  max-width: 1200px;
}

/* 大屏幕横向布局（宽度>600px） */
@media (min-width: 601px) {
  .timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
  }

  /* 中间的水平时间轴线 */
  .timeline::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    height: 2px;
    background-color: #ccc;
    transform: translateY(-50%);
  }

  .timeline li {
    flex: 1;
    text-align: center;
    position: relative;
    padding: 0 1rem;
  }

  /* 时间轴标记圆点 */
  .timeline .mark {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #2196F3;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }

  .timeline li h3,
  .timeline li p {
    margin-top: 2rem;
  }
}

/* 小屏幕纵向布局（宽度≤600px） */
@media (max-width: 600px) {
  .timeline li {
    position: relative;
    margin-bottom: 2rem;
    padding-left: 3rem;
  }

  .timeline .mark {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #2196F3;
    position: absolute;
    left: 0;
    top: 0.5rem;
  }

  /* 垂直时间轴线 */
  .timeline li::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 2rem;
    bottom: -2rem;
    width: 2px;
    background-color: #ccc;
  }

  /* 最后一个步骤隐藏尾部轴线 */
  .timeline li:last-child::before {
    display: none;
  }
}

关键实现细节 #

• 横向布局逻辑：
  • 用Flexbox的justify-content: space-between让每个步骤区块自动填充剩余空间，实现自适应宽度
  • 父容器的伪元素绘制水平轴线，标记点通过绝对定位居中在轴线上，保证视觉连贯
• 纵向布局逻辑：
  • 每个步骤垂直排列，标记点固定在左侧，内容通过左内边距留出空间
  • 每个步骤的伪元素绘制垂直轴线，最后一个步骤隐藏尾部轴线，避免多余视觉元素
• 标记点的颜色、尺寸，以及轴线的颜色都可以根据你的设计需求自由调整

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