包裹 <ul> 上的 CSS 水平线答案

【问题标题】：CSS horizontal lines on wrapped <ul>包裹 <ul> 上的 CSS 水平线
【发布时间】：2012-09-21 17:19:21
【问题描述】：

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

<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 来说明我已经走了多远，以及它应该是什么样子。有什么建议吗？

【问题讨论】：

您实际上是在尝试将块级行为添加到一组内联元素。是否可以使用背景图片？
好吧，假设是暂时的。

标签： css html-lists word-wrap

【解决方案1】：

您可以使用重复的线性渐变 - 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;
}

【讨论】：

+1 这是一个不错的解决方案，但如果字体大小发生变化，它会很困难（任何涉及重复背景的解决方案也会如此）
想必你可以使用ems 而不是pxs 作为最后一个参数来调整字体大小？

【解决方案2】：

如果 inline-block 不能解决问题，您可以尝试 display: block 而不是 table-cell 并添加一些 float: left 属性以使所有内容保持在同一行。

你也可以玩clear: both。实际上有很多方法可以做到这一点，这取决于您喜欢什么以及是否希望它在 IE6 或任何旧手机上运行...

【讨论】：

【解决方案3】：

这个适用于不同的字体大小，甚至适用于不同高度的元素：

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

这会在每个元素的顶部添加一个绝对定位的全宽线，然后隐藏多余的部分。

【讨论】：