javascript - CSS 中的水平时间轴

Question

我需要这样的图像。此外，它应该有导航按钮，可以在单击导航按钮时水平滚动，以便列表是动态的。我在下面使用 CSS 和 HTML 插入代码。它只能使用 CSS 完成，但对于导航图标，我们可以使用 JavaScript。还有<li>元素文本不应重叠，即使它太长也是如此。

.timeline {
  white-space: nowrap;
  overflow-x: hidden;
}

.timeline ol {
  font-size: 0;
  width: 100vw;
  padding: 250px 0;
  transition: all 1s;
}

.timeline ol li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  width: 160px;
  height: 3px;
  background: #e1e2e3;
}

.timeline ol li:last-child {
  width: 280px;
}

.timeline ol li:not(:first-child) {
  margin-left: 14px;
}

.timeline ol li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  bottom: 0;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #e1e2e3;
}

<div class="timeline">
    <ol>
      <li>abc</li>
      <li>hello welcome</li>
      <li>cool summer</li>
      <li>hi there</li>
      <li>whats up</li>
    </ol>
</div>

Answer 1

试试这个:

.timeline {
  overflow-x: hidden;
  padding: 20px 0;
}

.timeline ol {
  width: 100%;
  transition: all 1s;
  margin:0;
  padding:0;
  display:flex;
  justify-content: space-between;
}

.timeline ol li {
  list-style:none;
  position: relative;
  text-align:center;
  flex-grow: 1;
  flex-basis: 0;
  padding: 0 5px;
}

.timeline ol li:before {
  content:"";
  width:10px;
  height:10px;
  display:block;
  border-radius:50%;
  background: #ccc;
  margin:0 auto 5px auto;
}
.timeline ol li:not(:last-child)::after {
    content: "";
    width: calc(100% - 14px);
    height: 2px;
    display: block;
    background: #ccc;
    margin: 0;
    position: absolute;
    top: 4px;
    left: calc(50% + 7px);
}

https://jsfiddle.net/uer3gxeo/1/