element的timeline 时间线怎么弄横的

可以通过设置 CSS 样式来实现横向的时间线。以下是一个简单的例子：

HTML 代码：

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-date">2021年9月1日</div>
    <div class="timeline-content">
      <h3>事件标题</h3>
      <p>事件描述</p>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-date">2021年9月2日</div>
    <div class="timeline-content">
      <h3>事件标题</h3>
      <p>事件描述</p>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-date">2021年9月3日</div>
    <div class="timeline-content">
      <h3>事件标题</h3>
      <p>事件描述</p>
    </div>
  </div>
</div>

CSS 代码：

.timeline {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}

.timeline-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.timeline-date {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.timeline-content {
  text-align: center;
}

上述代码中，我们使用了 `display: flex` 属性将时间线的容器设置为弹性布局，并通过 `flex-direction: row` 将其设置为横向排列。同时，我们还设置了 `justify-content: center` 和 `align-items: center` 属性来使其水平和垂直居中。对于每一个时间线的项目，我们同样使用了 `display: flex` 属性将其设置为弹性布局，并通过 `flex-direction: column` 将其设置为垂直排列。最后，我们对每个项目的日期和内容进行了样式设置。