Горизонтальная разделительная линия между элементами плавающего списка в CSS

#css #css-float

Вопрос:

Я хочу добавить строку между плавающими элементами следующим образом:

 ..........................................
.                                        .
.    LI LI LI LI LI LI LI LI LI LI LI    .
.    --------------------------------    .
.    LI LI LI LI LI LI LI LI LI LI LI    .
.    --------------------------------    .
.    LI LI LI LI LI LI*                  .
.                                        .
..........................................

* Обратите внимание, что последние элементы списка в последней строке не имеют границы / разделительной линии.

У меня есть чистые элементы UL / LI, не хочу использовать дополнительный класс, который вызывает грязный HTML и нечеткие способы.

Как добиться этого с помощью чистого CSS?

1. вы пробовали использовать <hr> там, где вы хотите, чтобы разделительная линия?

2. HR в UL?? Итак, @cup_of

3. @Digerkam Я предполагаю, что количество <li> не является фиксированным для каждой строки, это правильно?

4. На самом деле, это 4 на рабочем столе, 3 на планшете и 2 на телефоне. Но клиент хочет поиграть с этим 🙂 @NilesTanner

Ответ №1:

Если вы можете предположить элементы в строке, вы можете сделать это с помощью чистого css

Пример: http://codepen.io/nilestanner/pen/yaPgzj

если у вас было 4 элемента li на ширину, вы можете поместить нижнюю границу на каждый

 li{
  float:left;
  width:25%;
  border-bottom: 1px solid black;
}

затем выделите последнюю строку и удалите границу.

 li:nth-child(4n 1):nth-last-child(-n 4),
  li:nth-child(4n 1):nth-last-child(-n 4) ~ li {
    border:none;
}

Тогда это просто вопрос создания медиа-запросов для каждой платформы. если у вас есть 3 элемента в строке, вы бы изменили все 4s на 3s, например