带弧形边框的垂直时间线转水平布局遇阻，求问题排查

核心调整要点 #

• 重构.timeline的flex布局：设置flex-direction: row，同时添加align-items: center保证所有节点垂直居中，避免文本块错位
• 转换时间线伪元素的方向：垂直版本用top/height控制线条，水平版本需换成left/width，并调整定位基准到垂直中线位置
• 适配弧形边框方向：将垂直版本的左右圆角，改为水平布局对应的上下圆角，匹配时间线延伸方向
• 统一文本块尺寸：给.timeline-item设置最小宽度，保证每个节点的文本块宽度一致，维持布局整洁

代码修改示例（基于垂直版本调整） #

垂直版本核心参考CSS #

.timeline {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.timeline-item {
  position: relative;
  padding-left: 2rem;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: #ccc;
  border-radius: 1px;
}
.timeline-item::after {
  content: '';
  position: absolute;
  left: -6px;
  top: 0.5rem;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid #007bff;
  border-radius: 50%;
}
.timeline-content {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 0.5rem 0.5rem 0.5rem 0;
}

改造后的水平版本CSS #

.timeline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  padding: 1rem 0;
  overflow-x: auto; /* 适配小屏幕横向滚动 */
}
.timeline-item {
  position: relative;
  padding-top: 2rem;
  min-width: 150px; /* 固定最小宽度，避免布局错乱 */
  text-align: center;
}
/* 水平时间线的连接线条 */
.timeline-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1rem; /* 定位到垂直中线 */
  width: 100%;
  height: 2px;
  background: #ccc;
  border-radius: 1px;
}
/* 时间节点圆点 */
.timeline-item::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0.5rem;
  transform: translateX(-50%); /* 水平居中 */
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid #007bff;
  border-radius: 50%;
}
/* 适配水平布局的弧形边框 */
.timeline-content {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 0.5rem 0.5rem 0 0.5rem;
}
/* 隐藏最后一个节点的多余线条 */
.timeline-item:last-child::before {
  display: none;
}

常见问题排查 #

• 文本块错位：检查.timeline是否设置align-items: center，同时确认.timeline-item的最小宽度是否统一
• 线条显示异常：确保.timeline-item设置position: relative，伪元素线条的宽高属性已从垂直的width:2px;height:100%改为水平的width:100%;height:2px
• 弧形边框不符合预期：调整border-radius的四个值顺序，对应水平布局的圆角方向（左上、右上、右下、左下）

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