5 回答
sevencuijian
TA貢獻(xiàn)5條經(jīng)驗(yàn) 獲得超1個(gè)贊
添加一種不同的答案：
<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>-
蕶碎記憶_阿飛222
舊丶愛人
TA貢獻(xiàn)7條經(jīng)驗(yàn) 獲得超9個(gè)贊
<!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貢獻(xiàn)21條經(jīng)驗(yàn) 獲得超28個(gè)贊
我之前做過類似的。
把其中一條線弄成背景l(fā)ine.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的白背景把壓在文字的線條給去除了。 你想線條離文字的距離調(diào)padding就可以了
精氣神_杭州拱墅區(qū)
TA貢獻(xiàn)2條經(jīng)驗(yàn) 獲得超0個(gè)贊
<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>
想要什么樣式自己調(diào)?box span>>padding:文字和線的間距；box span>>margin：線的長度；box hr>>顏色和粗細(xì)都可以調(diào)哦
添加回答
舉報(bào)
0/150
提交
取消