時間軸滑塊水平線中間

Question

我如何能實現爲atleast平板電腦和桌面版本的水平線？我嘗試了很多次，但都失敗了。

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