css怎么设置分割线
- 藏色散人原创
- 2021-05-13 14:23:2714963浏览
css设置分割线的方法：首先创建一个HTML实例文件；然后在body中创建三个div；最后给第二个div设置样式为“padding-top:3px;width:40%;border-top:1px solid #666666;”即可。
本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。
使用原生HTML CSS制作一个分割线
代码如下：
<html>
<title>分割线</title>
<body>
<div>
<span>设备：</span>
<span>1</span>
</div>
<div class="order">
<span style="white-space:pre"> </span><span class="line"></span>
<span style="white-space:pre"> </span><span class="txt">这里是一个分割线</span>
<span style="white-space:pre"> </span><span class="line"></span>
</div>
<div>
<span>设备：</span>
<span>2</span>
</div>
<style type="text/css">
.order {
height: 20px;
line-height: 20px;
text-align: center;
}
.order .line {
display: inline-block;
padding-top : 3px;
width: 40%;
border-top: 1px solid #666666;
}
.order .txt {
color: #333333;
font-size: 12px;
vertical-align: middle;
}
</style>
</body>
</html>效果如下图所示：
学习视频分享：css视频教程
以上是css怎么设置分割线的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：css怎么设置字母大写下一篇：css怎么隐藏元素但保留位置