css实现虚线装订线特效，怎么精炼的实现

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 4121 天前的主题，其中的信息可能已经有所发展或是发生改变。

类似 ------------ page 1 -------------------

这样，p border: 1px dashed; overflow: hidden?

前端的同学能给个精炼的代码么？谢谢

ps，刚才发的贴被吞了么？

精炼

page

9 条回复 • 1970-01-01 08:00:00 +08:00

P233

2013-09-14 23:32:22 +08:00

我的办法是，外层 container 清除浮动

内层三个元素全部 float:left

左右两个元素 width:45%; border-top: 1px dashed, margin-top

中间 width 10%

responsive 效果

chilaoqi

2013-09-15 08:34:49 +08:00

@P233 嗯，好像挺科学，试过没问题么？

baby

2013-09-15 09:09:52 +08:00 via iPhone

虚线用背景图，显示文字时背景设置白色挡住虚线。

83f420984

2013-09-15 09:21:08 +08:00 via Android

@P233 想法非常不错呀！我以前是用背景做的

83f420984

2013-09-15 09:48:36 +08:00 via Android

我试了下效果非常好

romoo

2013-09-15 10:05:38 +08:00

<div><p>page 1</p></div>

.div{position: relative; border-bottom: 1px solid #5C5C5C;}
p{position: absolute; top: **px; left: 50%; margin-left: -**px; background: #fff;}

lingyired

2013-09-15 10:44:32 +08:00

here: http://www.daqianduan.com/css-a-line/

easytest

2013-09-15 11:10:33 +08:00

@lingyired

@romoo

thanks a lot !

chilaoqi

2013-09-15 11:40:07 +08:00

@lingyired perfect,刚才挑了最简单的实现了

@romoo 恩，不错，也够简练了