时间轴滑块水平线中间

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;
 }

这是一个 fiddle - 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%;
}

时间轴滑块水平线中间

Timeline slider horizontal line middle

css

timeline