我正在使用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>

概念驗證，采用Flexbox布局

代碼筆演示#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>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.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.事件部分重疊 如果你需要讓盒子更近，節省一些水平空間，試著在列表項的右邊設置一個負的邊距(除了最后一個)，例如

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

代碼筆演示#2

結果

3.懸停時細節可見 這是#2的一個簡單變體，以防您需要插入比示例中簡單數字更多的文本

代碼筆演示#3

我建議在像這樣的復雜情況下使用SCSS或更少的代碼，以便更容易閱讀你的CSS。我用https://jsfiddle.net/e61oqsdz/的s CSS寫了這個CSS，然后在一些網站上編譯成CSS。

SCSS版附有解釋:

$li-height: 50px; // set li height here
$marginRight: 5%; // set margin right - the same unit must be used on $li-width so the width 
                  // will be $marginRight smaller(if using % so 100% can be achieved).

$li-width: 20% - $marginRight;

.i_timeliner{
  width: 100%;
  position:relative;
  display: inline-block;

  ul{
    width: inherit;
    margin:0;
    padding:0;
    list-style:none;
    height: auto;
    font-size:0; // remove the invisible spaces between the `li` elements 

    li{

      position: relative;
      display: inline-block;
      vertical-align:top;
      box-shadow: 0px 0px 1px 2px #000 inset; // add shadow instead of border
      // borders will stack with your width, and even when your elements have 
      // a total of 100% will get pushed on the next row 
      // if you have border on any one of them
      width: $li-width;
      height: $li-height;
      margin-right: $marginRight;

      .i_timeliner_box{
        position: absolute;
        left:0;
        top:0;
        width: 100%;
        height: 100%;
        font-size: 0.8rem;

        *{margin:0;}

      }

      &:nth-child(2n){ // here i'm pushing the even numbers from top
        margin-top: $li-height * 1.5; // 1.5 ratio means 'one height + half-of-height' 
        // so we can have the vertical space between blocks
      }

      &:last-child{
        // this is your delimiter, it's an empty li, with overwritten properties
        position: absolute;
        left:0;
        top: $li-height * 1.25; // 1.25 - is the ratio for position to middle. Since we 
        // already have a ratio of 1.5 for even elements, the 0.5 is the space gap, splitting 
        // in half the space gap is 0.25, right where our delimiter should be, 
        // adding a $li-height to it, we get 1.25
        background: red;
        box-shadow: none;
        border:0;
        height: 2px;
        width: 100%;
        margin: 0;
        font-size:0;

      }


    }

  }

}

.i_timeliner {
  width: 100%;
  position: relative;
  display: inline-block;
}

.i_timeliner ul {
  width: inherit;
  margin: 0;
  padding: 0;
  list-style: none;
  height: auto;
  font-size: 0;
}

.i_timeliner ul li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  box-shadow: 0px 0px 1px 2px #000 inset;
  width: 15%;
  height: 50px;
  margin-right: 5%;
}

.i_timeliner ul li .i_timeliner_box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 0.8rem;
}

.i_timeliner ul li .i_timeliner_box * {
  margin: 0;
}

.i_timeliner ul li:nth-child(2n) {
  margin-top: 75px;
}

.i_timeliner ul li:last-child {
  position: absolute;
  left: 0;
  top: 62.5px;
  background: red;
  box-shadow: none;
  border: 0;
  height: 2px;
  width: 100%;
  margin: 0;
  font-size: 0;
}

<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>
    <li></li>
  </ul>

</div>