Удалить последнего ребенка - PullRequest
Новая
       19

Удалить последнего ребенка

0 голосов
/ 21 сентября 2018

Я хотел бы добавить строку перед элементами li, но не включать после последнего li.Как я мог это сделать?

Here the image

Вот мой 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

Ответы [ 4 ]

0 голосов
/ 21 сентября 2018

Если вы сохраните текущую структуру 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/

0 голосов
/ 21 сентября 2018

Пожалуйста, внесите следующие изменения в ваш файл 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 и используйте :: before в li, а не в ul.

0 голосов
/ 21 сентября 2018

Вы можете использовать этот простой код: 

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.

Надеюсь, это поможет вам!

0 голосов
/ 21 сентября 2018

При текущей настройке вы можете установить высоту линии :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. Вы можете установить строку before для элементов li, кроме last-child, а не для 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>
...