最後のリスト項目がカスタマイズされたリストで異なる動作をするのはなぜですか？

Question

私はそうのような順不同リストとして構築されていAdminLTEからタイムラインウィジェットをカスタマイズするプロセスにいる：私は、複数の<ul></ul>を持っていることができればしかし、それは素晴らしいことだ、私の目的のために

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

、1日付ごとに私はそれを行う場合、結果は次のようになります。

ある

は、私がダウンして継続する垂直線を希望ギャップがあります。次のように

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が親<ul>の::beforeスタイルは、前<li> "に対し、適用されませんかのようにそれは（とにかく私に）見えますそうです。

私は、これは動作しますが、質問があるので、どのようにすることができ、それは、まだハックです.emptyクラス

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

に追加<li>を導入することにより、その周り私の方法をハックすることができます私はよりクリーンな方法でこれを行う？

編集：ここにはjsfiddleがあります。 EDIT 2：

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

これを追加し、last-childリスト項目にマージンをゼロにすることによって生じたスペースの問題を修正するには、次の下の余白を削除するには、これを追加

Answer 1

渡って私のポイントを得るためにjsfiddleを更新しました：

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