时间轴滑块水平线中间

Question

如何为至少平板电脑和台式机版本实现此水平线？我已经多次尝试但失败了。

Answer 1

沿着这些方面可能有些东西，虽然这只是一个粗略的答案，它需要更多的CSS来像上面那样设计它：

<强> HTML：

<div class="container">
  <div class="line"></div>
  <ul>
    <li>

    </li>
  </ul>
</div>

<强> CSS：

.container {
  background: grey;
  position: relative;
}
.line {
    position: absolute;
    width: 100%;
    z-index: 1;
    height: 1px;
    top: 50%;
    background: white;
 }
 ul {
    position: relative;
    z-index: 2;
    color: white;
    list-style: none;
    text-align: center;
 }
 li {
    display: inline-block;
    background: red;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0 20px;
 }

这是一个小提琴 - http://jsfiddle.net/d7yd7L5d/

Answer 2

您可以使用:before或:after选择器

<强> HTML

<div id="timeline">
  <ul>
    <li>
      Your Circle Code
    </li>
  </ul>
</div>

<强> CSS

#timeline li::before {
  background: #fff;
  content: " ";
  height: 1px;
  left: 100%;
  position: absolute;
  top: 50%;
  width: 100%;
}