在包装< ul>上的CSS水平线 [英] CSS horizontal lines on wrapped <ul>

问题描述

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

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
__________

我已经尝试使用 display：table-cell ，但我不能解决如何

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

我有准备一个jsfiddle 来说明我有多远，它应该是什么样子。任何建议？

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

推荐答案

您可以重复线性渐变 - DEMO

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

这篇关于在包装< ul>上的CSS水平线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！