5 回答
sevencuijian
TA贡献5条经验 获得超1个赞
添加一种不同的答案：
<style>
.xian{width:100%;height: 30px;position: relative;text-align: center;background: #ECEFF4;line-height: 30px}
.xian span{padding: 0 20px;background: #ECEFF4;position: relative;z-index: 7;}
.xian:before{content: "";width: 100%;height: 1px;background: #000;position: absolute;top: 15px;left: 0;z-index: 1;}
</style>
<div class="xian"><span>这里是文字信息</span></div>
旧丶爱人
TA贡献7条经验 获得超9个赞
<!DOCTYPE html>
<html>
<head>
<style>
.test{
border-top:1px solid black;
margin-top:20px;
width:400px;
text-align:center;
position:relative;
}
.test span{
position:relative;
top:-10px;
background:#fff;
padding:0 10px;
}
</style>
</head>
<body>
<div class="test">
<span>你可以使用以下方式登录</span>
</div>
</body>
</html>
_是你_
TA贡献21条经验 获得超28个赞
我之前做过类似的。
把其中一条线弄成背景line.png
html部分
<h3><span>你好 世界</span></h3>
样式部分：
h3{text-align: center;background: url(line.png) repeat-x left center;}
span{ display: inline-block; background: #fff;padding: 0 10px;}
原理就是span的白背景把压在文字的线条给去除了。 你想线条离文字的距离调padding就可以了
精气神_杭州拱墅区
TA贡献2条经验 获得超0个赞
<style>
.box{ text-align: center;display: inline-block; }
.box span{ background-color: #fff; padding: 0 10px; margin:0 30px; }
.box hr{ margin-top: -10px;border:0;border-top:1px solid red;}
</style>
<div class="box">
<span class="text">你可以使用以下方式登录</span>
<hr>
</div>
想要什么样式自己调 box span>>padding:文字和线的间距；box span>>margin：线的长度；box hr>>颜色和粗细都可以调哦
- 5 回答
- 0 关注
- 2228 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消