html - 如何使用css显示水平时间线

Question

我正在使用 CSS 创建水平时间轴。我尝试了下面的代码，但没有得到预期的输出。我认为位置或奇偶 css 存在一些问题。另外，我的代码中出现了水平滚动。

请检查我的代码并在我添加了错误的 css 的地方帮助我。

你能帮我解决这个问题吗？

我的预期输出是

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

.i_timeliner li {
  float: left;
  width: 20%;
  position: relative;
  display: inline-block;
  list-style-type: none;
  height: 3px;
  background: #fff;
}

.i_timeliner li:before {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border: 3px solid #000;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: #000;
  letter-spacing: 0px;
}

.i_timeliner li:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #000;
  top: 25px;
  left: 0%;
  z-index: -1;
}

.i_timeliner_box {
  border: 1px solid #ccc;
  margin: 20px;
  min-height: 140px;
  box-sizing: border-box;
  padding: 0 25px;
}

.i_timeliner ul li div {
  position: absolute;
  left: calc(100% + 7px);
  width: 280px;
  padding: 15px;
  font-size: 1rem;
  white-space: normal;
  color: black;
  background: white;
}

.i_timeliner ul li div::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
}

.i_timeliner ul li:nth-child(odd) div {
  top: -16px;
  transform: translateY(-100%);
}

.i_timeliner ul li:nth-child(odd) div::before {
  top: 100%;
  border-width: 8px 8px 0 0;
  border-color: white transparent transparent transparent;
}

.i_timeliner ul li:nth-child(even) div {
  top: calc(100% + 16px);
}

.i_timeliner ul li:nth-child(even) div::before {
  top: -8px;
  border-width: 8px 0 0 8px;
  border-color: transparent transparent transparent white;
}

<div class="i_timeliner">
  <ul>

    <li>
      <div class="i_timeliner_box">
        <h2>1</h2>
        <p></p>
      </div>
    </li>
    <li>
      <div class="i_timeliner_box">
        <h2>2</h2>
        <p></p>
      </div>
    </li>
    <li>
      <div class="i_timeliner_box">
        <h2>3</h2>
        <p></p>
      </div>
    </li>
    <li>
      <div class="i_timeliner_box">
        <h2>4</h2>
        <p></p>
      </div>
    </li>
    <li>
      <div class="i_timeliner_box">
        <h2>5</h2>
        <p></p>
      </div>
    </li>
  </ul>

</div>

Answer 1

1.无重叠

概念验证，使用 Flexbox 布局

Codepen Demo #1

---

结果

---

标记

<ul class="timeline">
  <li>
    <div>
      <time datetime="2018-10-09">October 9, 2018</time>
      <p>description event #1</p>      
    </div>
  </li>
  ...
  <li>
    <div>
      <time datetime="2018-10-09">October 9, 2018</time>
      <p>description event #n</p>      
    </div>
  </li>
</ul>

CSS

.timeline { 
 
    /* set a variable for the color */
    --timeline-color: #9bc;
  
    position: relative;
    list-style: none;
    display: inline-flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    height: 240px; }  /* set here the height of the timeline */


/* middle line */
.timeline:before {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    width: 100%;
    height: 2px;
    background: var(--timeline-color); }


.timeline li { 
    margin: 0 20px;
    min-width: 200px;
    align-self: flex-start; }


/*  event in even position are bottom-aligned */
.timeline li:nth-child(2n) { align-self: flex-end;  }


.timeline div {
    position: relative;
    padding: 10px;
    border: 1px var(--timeline-color) solid; }


/* style for the dot over the timeline */
.timeline li:before {
    content: "";
    position: absolute;
    top: 50%;
    margin-left: 100px;
    transform: translate(-50%, -50%);
    border: 1px #9bc solid;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background:  var(--timeline-color);      
}


/* style for the event arrow */
.timeline div:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -1px) rotateZ(45deg);
    background: #fff;
}


/* position of the event arrow in odd position */
.timeline li:nth-child(2n - 1) div:before {
    top: 100%;
    margin-top: -8px;
    border-right: 1px var(--timeline-color) solid;
    border-bottom: 1px var(--timeline-color) solid; }


/* position of the event arrow in even position */
.timeline li:nth-child(2n) div:before {
    top: 0;
    margin-top: -10px;
    border-left: 1px var(--timeline-color) solid;
    border-top: 1px var(--timeline-color) solid; }

---

2.事件部分重叠

如果你需要让框更近并节省一些水平空间，请尝试在列表项(除了最后一个)上设置负 margin-right，例如

.timeline li:not(:last-child) { 
    margin: 0 -50px 0 0;
}

Codepen Demo #2

---

结果

---

3.悬停时细节可见

这是 #2 的简单变体，以防您需要插入比示例中的简单数字更多的文本

Codepen Demo #3

---