Как отобразить горизонтальную шкалу времени с помощью 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Демонстрация № 3

---

Answer 2

Я рекомендую использовать SCSS или LESS в сложных случаях, подобных этому, для более удобного чтения вашего CSS.Я написал этот CSS с использованием SCSS (https://jsfiddle.net/e61oqsdz/), а затем скомпилировал его на каком-то онлайн-сайте в 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>