我有一个来自数据库的项目列表:
- 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;
}