Question

我想在li元素之前添加行，但在最后一个li之后不添加行。我该怎么办？

Here the image

这是我的CSS：

requests

documentation

Answer 1

在当前设置下，您可以将:before行的高度设置为等于100% - li height。或最后一个li height。这不是很及时，但是却不知道您项目中的实际情况，这是最佳的（imo）解决方案。

您还有margin-bottom: 10px 0。那是不对的。我将其更改为margin-bottom: 10px;

/* Timeline Changelogs */
ul.timeline {
    list-style-type: none;
    position: relative
}
ul.timeline:before {
    content: '';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 31px;
    width: 2px;
    height: calc(100% - 52px);
    z-index: 400
}

ul.timeline > li {
    margin-bottom: 10px;
    padding-left: 10px
}
ul.timeline > li:not(:last-child):after {
    content: '';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 2px solid #22c0e8;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400
}

<div class="col-12">
  <ul class="timeline">
    <li>
      <p><b>20 Sept 2018</b></p>
      <p>This is 20 Sept 2018</p>
    </li>
    <li>
      <p><b>17 Sept 2018</b></p>
      <p>This is 17 Sept 2018</p>
    </li>
    <li>
      <p><b>11 Sept 2018</b></p>
      <p>This is 11 Sept 2018</p>
    </li>
    <li>
      <p><b>8 Sept 2018</b></p>
      <p>This is 8 Sept 2018</p>
    </li>
  </ul>
</div>

选项2.您可以将前行设置为li元素（最后一个孩子除外），而不是ul。并将其设置为高度100% + 1em。因为在jsfiddle和snippet中，p内部的li默认具有margin: 1em 0。如果您更改默认边距，则在设置高度时应考虑到这一点。

此外，您需要在position:relative上使用li，以便:before的高度是相对于li而不是ul的。因此，您需要更改直线和圆的left值。但是它很容易调整。

/* Timeline Changelogs */
ul.timeline {
    list-style-type: none;
    position: relative
}


ul.timeline > li {
    margin-bottom: 10px;
    padding-left: 10px;
    position:relative;
}
ul.timeline > li:not(:last-child):after {
    content: '';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 2px solid #22c0e8;
    left: -21px;
    width: 20px;
    height: 20px;
    z-index: 401
}
ul.timeline > li:not(:last-child):before {
   content: '';
    background: red;
    display: inline-block;
    position: absolute;
    left: -10px;
    width: 2px;
    height: calc(100% + 1em);
    z-index: 400;
    top:0;
}

<div class="col-12">
  <ul class="timeline">
    <li>
      <p><b>20 Sept 2018</b></p>
      <p>This is 20 Sept 2018</p>
    </li>
    <li>
      <p><b>17 Sept 2018</b></p>
      <p>This is 17 Sept 2018</p>
    </li>
    <li>
      <p><b>11 Sept 2018</b></p>
      <p>This is 11 Sept 2018</p>
    </li>
    <li>
      <p><b>8 Sept 2018</b></p>
      <p>This is 8 Sept 2018</p>
    </li>
  </ul>
</div>

Answer 2

请对您的CSS文件进行以下更改：

/* Timeline Changelogs */
ul.timeline {
    list-style-type: none;
    position: relative
}
ul.timeline > li {
    margin-bottom: 10px;
    padding-left: 10px;
}
ul.timeline > li:not(:last-child)::after {
    content: '';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 2px solid #22c0e8;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 401
}
ul.timeline > li:not(:last-child)::before {
    content: '';
    background: red;
    display: inline-block;
    position: absolute;
    left: 31px;
    width: 2px;
    height: 80px;
    z-index: 400
}

您的CSS高度有些问题，在li而不是ul中使用:: before。

Answer 3

您可以使用以下简单代码：

ul {
  margin-left: 10px;
  padding: 0;
  width: 100%;
  border-left: 2px solid #999;
}

li {
  list-style: none;
  padding-left: 20px;
  height: 100%;
  margin: 0;
  display: block;
  position: relative;
}

li:last-child:before { /*With this you hide the last-child li line*/
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: #fff;
}

li:after {
  content: '';
  position: absolute;
  top: 0;
  left: -12px; /*The half of the circle width minus the border width*/
  border-radius: 50%;
  border: 2px solid #22c0e8;
  width: 20px;
  height: 20px;
  background: #fff;
}

<ul>
  <li>
    <p><b>Title</b></p>
    <p>Subtitle</p>
  </li>
  <li>
    <p><b>Title</b></p>
    <p>Subtitle</p>
  </li>
  <li>
    <p><b>Title</b></p>
    <p>Subtitle</p>
  </li>
  <li>
    <p><b>Title</b></p>
    <p>Subtitle</p>
  </li>
</ul>

为了隐藏li:last-child行，我使用了before伪元素，该伪元素越过行并将其隐藏。为了放置圆，我使用了after伪元素，该元素位于行的中间。为此，我们从left: 0减去圆的宽度（10）的一半减去线（2）的宽度开始。 li标签上的两个伪元素。

希望对您有帮助！

Answer 4

如果保留当前的HTML结构，则可以像下面的代码所示进行操作。只需将您的before元素移至每个LI元素而不是UL，并更改内部P元素的边距和填充，以便左侧边框相应地延伸。

         a    b    c
1      NaN    5    4
2    "foo"  NaN    1

http://jsfiddle.net/6tcgr9eq/

删除最后一个孩子李

4 个答案: