如何通過垂直線和子彈按鈕來顯示套項目的

Question

請看圖像

我已經試過這樣：

CSS - Vertical line between bullets in an unordered list

我有如下的結果：

你能幫我嗎？我希望它看起來像第一個圖像。

Answer 1

你可以有點瘋狂，但你可以做到這一點。我不知道我是否會在很多情況下推薦此代碼，因爲它很「微妙」，我懷疑可能很容易中斷。

.time-chart { 
 
    font-family: Arial, sans-serif; 
 
    font-size: 12px; 
 
} 
 

 
h3.start { 
 
    border: 0; 
 
    border-radius: 15px; 
 
    background: blue; 
 
    color: white; 
 
    display: inline-block; 
 
    font-weight: normal; 
 
    font-family: Arial, sans-serif; 
 
    font-size: 12px; 
 
    padding: .75em; 
 
    margin: 0; 
 
    margin-left: 105px; 
 
} 
 

 
ul.timeline { 
 
    padding-left: 170px; 
 
    margin-top: -6px; 
 
} 
 

 
ul.timeline li { 
 
    padding-left: 0; 
 
    margin-bottom: 2.5em; 
 
    list-style: none; 
 
} 
 

 
.event { 
 
    font-size: 1em; 
 
    display: inline-block; 
 
    margin-left: -160px; 
 
    font-weight: bold; 
 
} 
 

 
.event:after { 
 
    content: "•"; 
 
    color: blue; 
 
    background: white; 
 
    border: 1px solid blue; 
 
    width: 10px; 
 
    height: 10px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    left: -21px; 
 
    line-height: 12px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
.description { 
 
    display: block; 
 
    margin-top: -12px; 
 
    padding-left: 10px; 
 
} 
 

 

 
/* BORDERS AND BULLETS */ 
 

 
p { 
 
    /*CSS reset*/ 
 
    margin-bottom: 0; 
 
} 
 

 
ul.timeline li { 
 
    position: relative; 
 
    /* so that pseudoelements are positioned relatively to their "li"s*/ 
 
    /* use padding-bottom instead of margin-bottom.*/ 
 
    margin-bottom: 0; 
 
    /* This overrides previously specified margin-bottom */ 
 
    padding-bottom: 2.5em; 
 
} 
 

 
ul.timeline li:after { 
 
    /* bullets */ 
 
    content: ""; 
 
} 
 

 
ul.timeline li:before { 
 
    /* lines */ 
 
    content: ""; 
 
    position: absolute; 
 
    left: -16px; 
 
    /* adjust manually */ 
 
    border-left: 1px solid blue; 
 
    height: 100%; 
 
    width: 1px; 
 
} 
 

 
ul.timeline li:first-child:before { 
 
    /* first li's line */ 
 
    top: 6px; 
 
    /* moves the line down so that it disappears under the bullet. Adjust manually */ 
 
} 
 

 
ul.timeline li:last-child:before { 
 
    /* last li's line */ 
 
    height: 6px; 
 
    /* shorten the line so it goes only up to the bullet. Is equal to first-child:before's top */ 
 
}

<div class="time-chart ui-widget"> 
 
    <h3 class="start">Journey Begins</h3> 
 
    <ul class="timeline"> 
 
    <li>&nbsp;</li> 
 
    <li> 
 
     <div class="event">New Product Launch</div> 
 
     <p class="description">Jelly-o pie chocolate cake...</p> 
 
    </li> 
 
    <li class="green"> 
 
     <div class="event">New York Times</div> 
 
     <p class="description">Jelly-o pie chocolate cake...</p> 
 
    </li> 
 
    <li class="green"> 
 
     <div class="event">New York Times</div> 
 
     <p class="description">Jelly-o pie chocolate cake...</p> 
 
    </li> 
 
    <li>&nbsp;</li> 
 
    </ul> 
 
</div>