时间戳

首页 > 解决方案 > 删除最后一个孩子 li

css - 删除最后一个孩子 li

问题描述

我想在 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

标签： csscss-selectorshtml-lists

解决方案

: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除 last-child 之外的元素，而不是ul. 并将其设置为 height 100% + 1em。因为在jsfiddle和snippet里面，p里面默认li有margin: 1em 0。如果您更改默认边距，则在设置高度时应考虑这一点。

此外，您需要position:relativeonli所以:before高度是相对于linot 的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>

推荐阅读