css怎么设置分割线

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怎么设置分割线的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！