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

它看起来（无论如何）好像上一个margin-bottom的{{1}}没有应用父<li>的{{1}}样式，而前面的::before做了。

我可以通过引入额外的<ul> <li>类

来解决这个问题

<li>

和

.empty

虽然这有效，但它仍然是一个黑客，所以问题是，我怎么能以更清洁的方式做到这一点？

编辑：这是jsfiddle。编辑2：更新jsfiddle以了解我的观点

Answer 1

添加此项以删除底部边距：

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

要修复因last-child列表项上的边距归零而导致的间距问题，请添加以下内容：

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

为什么最后一个列表项在自定义列表中的行为有所不同？

1 个答案: