设计 hr 元素水平线的对齐\颜色\长度的样式

概览

在 HTML 旧版本中，规定 <hr> 元素的对齐方式属性可以使用 align: left;center;right 来定义，但在 HTML5 中已经不受支持，HTML 4.01 已废弃。 

而在 CSS 中，通过 margin 外边距元素来控制 <hr> 向父级元素的距离以达到对齐方式。

示例代码。

CSS

div.listGroup {
    margin: 50px auto;
}
hr.lineLeft {
  width: 80%;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 0;
}
hr.lineRight {
  width: 80%;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 0;
}
hr.lineCenter {
  width: 80%;
  margin-top: 5px;
  margin-bottom: 5px;
}

HTML

<div class="listGroup">
    左对齐
    <hr class='lineLeft'>
</div>
<div class="listGroup">
    居中对齐
    <hr class='lineCenter'>
</div>
<div class="listGroup">
    右对齐
    <hr class='lineRight'>
</div>

hr 标签

默认自带通用标准。

CSS

hr{
    height: .5px;
    background-color: #cccccc;
    border: none;
}
hr.hrLine {
    background-color: #005aff82;        
}
hr.hrWidth {
    width: 30%;
}

HTML

<center>hr 标签（默认样式）</center>
<hr>
<p></p>
<center>hr 标签（改变颜色）</center>
<hr class="hrLine">
<p></p>
<center>hr 标签（改变长度）</center>
<hr class="hrWidth">

border-bottom 标签

使用边框线条来替代原 hr 标签。

CSS

div.borderLine {
    padding-bottom: 10px;
    border-bottom: 1px solid #cdcdcd;
}
div.borderColor {
    border-bottom: 1px solid #005aff82;        
}
div.borderWidth {
    margin: auto;
    width: 30%;        
}

HTML

<center>border-bottom 标签（默认样式）</center>
<div class="borderLine"></div>
<p></p>
<center>border-bottom 标签（改变颜色）</center>
<div class="borderLine borderColor"></div>
<p></p>
<center>border-bottom 标签（改变长度）</center>
<div class="borderLine borderWidth"></div>

Demo

https://static.hexingxing.cn/v3/html/hrline/

https://static.hexingxing.cn/v3/html/hrline-border-bottom/