Horizontal CSS lines on wrapped <ul>

Question

I have a list of items coming from the 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 be completed, if necessary, and each line should have horizontal lines and look something like this:

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

However, I cannot figure out how to make the strings have full-sized strings, and therefore it looks like this:

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

I tried using display:table-cell , but I can't figure out how to get them to wrap if I don't know how much should be in the row (which I don't have).

I prepared jsfiddle to illustrate how far I have and how it will look. Any suggestions?

Answer 1

You can play 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 the inline block does not perform the trick, you can try display: block instead of table-cell and add some float: left property to save everything on one line.

You can play with clear: both . Actually there are many ways to do this, it depends on what you prefer and if you want it to work on IE6 or on any old mobile phone ...

Answer 3

This file 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 the absolute position of the full width at the top of each element, and then hides the excess.