Digerkam Digerkam - 2 months ago 6
CSS Question

Horizontal Divider Line Between Floating List Items in CSS

I want to add line between floating items like this:

..........................................
. .
. 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* .
. .
..........................................


*Notice that last list items at last row has no border/divider line.

I have pure UL/LI elements, dont want to use extra class that cause look dirty HTML and unschemantic ways.

How to accomplish this with pure CSS?

Answer

If you can assume the elements per row you can do this with pure css

Example : http://codepen.io/nilestanner/pen/yaPgzj

if you had 4 li elements per width you can place a bottom border on each

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

then select the last row and remove the border.

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

Then it's just a matter of making media queries for each platform. if you have 3 elements per row you would change all of the 4s to 3s for example