删除最后一个孩子 li

Question

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

这是我的 CSS：

ul.timeline {
    list-style-type: none;
    position: relative
}

ul.timeline:before {
    content: '';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400
}

ul.timeline > li {
    margin-bottom: 10px 0;
    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
}

JSFiddle

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 和 sn-p 中，li 内部的p 默认具有margin: 1em 0。如果您更改默认边距，则在设置高度时应考虑到这一点。

此外，您需要在li 上设置position:relative，因此: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 中使用 ::before 而不是在 ul 中。

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 元素的边距和填充，以便左边框相应地拉伸。

ul.timeline > li:before {
content: '';
background: #d4d9df;
display: inline-block;
position: absolute;
left: -9px;
width: 2px;
height: 100%;
z-index: 400
}

ul.timeline > li {
margin-bottom: 10px 0;
padding-left: 10px;
position: relative;
}

ul.timeline > li::after {
content: '';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 2px solid #22c0e8;
left: -20px;
top: 0px;
width: 20px;
height: 20px;
z-index: 400;
}

ul.timeline > li:last-child:before{
display:none;
}

ul.timeline > li > p{
margin-top: 0px;
padding-top: 0px;
}

ul.timeline > li > p + p{
margin-bottom: 0px;
margin-top: 0em;
padding-top: 0px;
padding-bottom: 1em;
}

http://jsfiddle.net/6tcgr9eq/

Answer 5

删除最后一个孩子之前的 : 和使用的 :after

ul.timeline > li:not(:last-child):after {
   border-bottom: none !important;
}