CSS包裹的水平线<；ul>；

我有一个来自数据库的项目列表：

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

我尝试过使用

display:table cell

，但我无法解决如何包装它们，除非我知道一行中应该有多少个（我不知道）

---

我必须说明我已经走了多远，它应该是什么样子。有什么建议吗？

你可以玩玩重复的线性渐变-

---

如果内联块不起作用，您可以尝试

display:block

而不是

table cell

，并添加一些

float:left

属性以使所有内容保持在同一行

---

你也可以玩

clear:两者都可以。实际上有很多方法，这取决于你喜欢什么，如果你想让它在IE6或任何旧手机上工作…
这一种可以使用不同的字体大小，甚至是不同高度的元素：

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

这会在每个元素的顶部添加一条绝对定位的全宽线，然后隐藏多余的部分。
您实际上是在尝试向一组内联元素添加块级行为。使用背景图像是一种可能性吗？好吧，假设目前是这样。+1这是一个很好的解决方案，但如果字体大小发生变化（任何涉及重复背景的解决方案都会出现这种情况），那么您可能会使用
em
s而不是
px
s作为最后一个参数来调整字体大小？
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 {
    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;
}