CSS垂直時間線

我想創建一個垂直時間線向下的引導頁面的中間，用圓圈代表沿着它的每個日期。CSS垂直時間線

的CSS我至今是：

.middleline { 
     list-style: none; 
     position: relative; 
     padding: 20px 0px 20px; 
    } 

    .middleline:before{ 
     top: 0; 
     bottom: 0; 
     position: absolute; 
     content: " "; 
     width: 3px; 
     background-color: #608dc5; 
     left: 50%; 
     margin-left: -1.5px; 
    } 

    .middleline li{ 
     position: absolute; 
     width: 40px; 
     height: 40px; 
     background-color: #4f80bf; 
     border-radius: 50px; 
    }

我一直是這樣幾個小時擺弄了，但不能讓它與時間表圈（LI）在它中心。左邊的線稍微向右，右邊的線是左邊的線。用右/左移動它們會將它們推到頁面的末尾。

有什麼想法？

小提琴整個頁面的：https://jsfiddle.net/vtb4t17h/

來源

2015-11-10 Provoke

你能提供一個小提琴的實際標記？（html + css） –

https://jsfiddle.net/vtb4t17h/ 它的引導，所以不會顯示在小提琴中。但顯示垂直時間線（圓圈）。忽略頂部的水平面。 – Provoke

你的意思是這樣的：https://jsfiddle.net/vtb4t17h/1/

基本不變.middleline li

看起來像這樣：

.middleline li { 
    position: absolute; 
    width: 40px; 
    height: 40px; 
    background-color: #4f80bf; 
    border-radius: 50px; 
    left: 50%; 
    margin-left: -20px; 
    list-style: none; 
}

我說：

left: 50%; 
    margin-left: -20px; 
    list-style: none;

我做什麼

我抵消left:50%（這使李正好中心），就是他們是40像素寬，所以他們需要被帶到由20像素背在這樣獲得該元素的中心，所以margin-left:-20px這樣做

來源

2015-11-10 14:26:37

是的，完全一樣 - 謝謝。剩餘的餘量是多少？另外，我將如何使這個頁面中間的全長與文本在每一邊？ – Provoke

我已經更新了我的答案以解釋..從小提琴中刪除邊距，然後您會看到它太偏右。「我偏移了」left：50％'（這使得li完全居中），東西他們是40px寬，所以他們需要帶回20px所以得到該元素的中心，所以'margin-left：-2px'這樣做「 –

這很有道理 - 非常感謝！ – Provoke

CSS垂直時間線

回答

相關問題