css很短的水平线,包裹的CSS水平线

淩亂°似流年 2022-09-03 01:29 175阅读 0赞

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

*  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

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

但是,我无法弄清楚如何使行具有全长行,因此它看起来像：\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

Jon Skeet Darin Dimitrov Marc Gravell BalusC

\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_

Hans Passant SLaks VonC Greg Hewgill

\_\_\_\_\_\_\_\_\_\_

JaredPar

\_\_\_\_\_\_\_\_\_\_

我已经尝试过使用display：table-cell,但是我无法弄清楚如何让它们换行,除非我知道连续应该有多少(我没有).

我用prepared a jsfiddle来说明我已经走了多远,看起来应该是什么样子.有什么建议？

最佳答案 你可以玩重复的线性渐变 –

DEMOul, 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;

还没有评论，来说两句吧...