爲什麼最後的列表項在自定義列表中的行爲不同？

Question

我在定製時間表部件從AdminLTE它被構建爲一個無序列表，像這樣的過程：

<ul class="timeline"> 

    <!-- timeline time label --> 
    <li class="time-label"> 
     <span class="bg-red"> 
     10 Feb. 2014 
     </span> 
    </li> 
    <!-- /.timeline-label --> 
    <!-- timeline item --> 
    <li> 
     <!-- timeline icon --> 
     <i class="fa fa-envelope bg-blue"></i> 
     <div class="timeline-item"> 
     <span class="time"><i class="fa fa-clock-o"></i> 12:05</span> 

     <h3 class="timeline-header"><a href="#">Support Team</a> ... 
     </h3> 

     <div class="timeline-body"> 
      ... 
      Content goes here 
     </div> 

     <div class="timeline-footer"> 
      <a class="btn btn-primary btn-xs">...</a> 
     </div> 
     </div> 
    </li> 
    <!-- END timeline item --> 

</ul> 

對於我而言，不過，這將是巨大的，如果我能有多個<ul></ul>，一個爲每個日期。如果我這樣做，結果是這樣的：

就是說，存在這樣的情況，我想垂直線繼續向下一個缺口。

的CSS如下：

.timeline { 
    position: relative; 
    margin: 0 0 30px 0; 
    padding: 0; 
    list-style: none; 
} 
.timeline:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 4px; 
    background: #ddd; 
    left: 31px; 
    margin: 0; 
    border-radius: 2px; 
} 
.timeline > li { 
    position: relative; 
    margin-right: 10px; 
    margin-bottom: 15px; 
} 
.timeline > li:before, 
.timeline > li:after { 
    content: " "; 
    display: table; 
} 
.timeline > li:after { 
    clear: both; 
} 
.timeline > li > .timeline-item { 
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 
    border-radius: 3px; 
    margin-top: 0; 
    background: #fff; 
    color: #444; 
    margin-left: 60px; 
    margin-right: 15px; 
    padding: 0; 
    position: relative; 
} 
.timeline > li > .timeline-item > .time { 
    color: #999; 
    float: right; 
    padding: 10px; 
    font-size: 12px; 
} 
.timeline > li > .timeline-item > .timeline-header { 
    margin: 0; 
    color: #555; 
    border-bottom: 1px solid #f4f4f4; 
    padding: 10px; 
    font-size: 16px; 
    line-height: 1.1; 
} 
.timeline > li > .timeline-item > .timeline-header > a { 
    font-weight: 600; 
} 
.timeline > li > .timeline-item > .timeline-body, 
.timeline > li > .timeline-item > .timeline-footer { 
    padding: 10px; 
} 
.timeline > li > .fa, 
.timeline > li > .glyphicon, 
.timeline > li > .ion { 
    width: 30px; 
    height: 30px; 
    font-size: 15px; 
    line-height: 30px; 
    position: absolute; 
    color: #666; 
    background: #d2d6de; 
    border-radius: 50%; 
    text-align: center; 
    left: 18px; 
    top: 0; 
} 
.timeline > .time-label > span { 
    font-weight: 600; 
    padding: 5px; 
    display: inline-block; 
    background-color: #fff; 
    border-radius: 4px; 
} 
.timeline-inverse > li > .timeline-item { 
    background: #f0f0f0; 
    border: 1px solid #ddd; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
} 
.timeline-inverse > li > .timeline-item > .timeline-header { 
    border-bottom-color: #ddd; 
} 

它看起來（反正我）彷彿最後<li>的margin-bottom沒有得到::before樣式應用父<ul>的，而前面的<li>「是的。

我可以用.empty類引入額外<li>破解我身邊這樣

  ... 
     <div class="timeline-footer"> 
      <a class="btn btn-primary btn-xs">...</a> 
     </div> 
     </div> 
    </li> 
    <!-- END timeline item --> 
    <li class="empty"></li> 
</ul> 

和

.timeline { 
    margin-bottom: 0; 
} 
.timeline li.empty { 
    line-height: 0; 
    margin-bottom: 0; 
} 

雖然這個工作，它仍然是一個黑客這樣的問題是，如何能我用更清潔的方式做到這一點？

編輯：這是jsfiddle。 編輯2：更新jsfiddle讓我點對面

Answer 1

添加此按鈕，刪除底部邊距：

.timeline > li:last-child { 
    margin-bottom: 0; 
} 

要解決造成歸零的last-child列表項的邊距的間距問題，補充一點：

.timeline > li:last-child .timeline-footer { 
    margin-bottom: 10px; 
}