CSS horizontal lines on wrapped <ul>

Question

I've got a list of items coming from a database:

<ul>
    <li>Jon Skeet</li>
    <li>Darin Dimitrov</li>
    <li>Marc Gravell</li>
    <li>BalusC</li>
    <li>Hans Passant</li>
    <li>SLaks</li>
    <li>VonC</li>
    <li>Greg Hewgill</li>
    <li>JaredPar</li>
</ul>

The list will wrap when necessary, and each line should have horizontal lines, and look a bit like this:

____________________________________________________
 Jon Skeet   Darin Dimitrov   Marc Gravell   BalusC
____________________________________________________
 Hans Passant   SLaks   VonC   Greg Hewgill
____________________________________________________
 JaredPar
____________________________________________________

However, I can't work out how to get the rows to have full-length lines, and so it looks like:

____________________________________________________
 Jon Skeet   Darin Dimitrov   Marc Gravell   BalusC
____________________________________________
 Hans Passant   SLaks   VonC   Greg Hewgill
__________
 JaredPar
__________

I've tried using display:table-cell , but I can't work out how to get them to wrap unless I know how many there should be in a row (which I don't).

I've prepared a jsfiddle to illustrate how far I've got, and what it should look like. Any suggestions?

Answer 1

You can play around with repeating linear gradients - DEMO

ul, section {
    margin: 40px;
    max-width: 350px;
    border-bottom: 1px solid #000;

    background: -moz-repeating-linear-gradient(to bottom, black, black 1px, white 1px, white 36px);
    background: -webkit-repeating-linear-gradient(black 0, white 1px, white 36px);
}

li {
    display: inline-block;
    padding: 0.5em;
}
​

Answer 2

If inline-block doesn't do the trick, you could try display: block instead of table-cell and add some float: left property to keep everything on the same line.

You could play around with clear: both too. There are actually a lot of ways to do it, it depends on what you do prefer and if you want it to work on IE6 or any old cellphone...

Answer 3

This one works with different font-sizes, or even with elements of different heights:

ul {
    overflow: hidden;
    width: 300px;
    border: solid #000;
    border-width: 1px 0;
    padding: 0;
}

li {

    padding: 5px 20px;
    display: inline-block;
    vertical-align: top;
    position: relative;
}

li:before {
    content: '';
    display: block;
    position: absolute;
    top: -1px;
    left: 0;
    background: #000;
    height: 1px;
    width: 300px;
}

This adds an absolute positioned full width line at the top of each element, and then hides the excess.