包裹 <ul> 上的 CSS 水平线

我有一个来自数据库的元素列表:

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

列表会在必要时换行，每一行都应该有水平线，看起来有点像这样:

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

但是，我无法弄清楚如何使行具有全长行，因此它看起来像:

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

我试过使用 display:table-cell ，但我无法弄清楚如何让它们包装，除非我知道连续应该有多少(我不知道)。

我用 prepared a jsfiddle 来说明我已经走了多远，以及它应该是什么样子。有什么建议么？

最佳答案

您可以尝试重复线性渐变 - 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;
}
​

关于包裹 <ul> 上的 CSS 水平线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12535175/