概览

在 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/


何星星原创文章仅用于个人学习,当前页面暂不支持复制操作,了解详情或文章转载请 点此 继续!
分类: 前端开发

0 条评论

发表回复

Avatar placeholder

您的电子邮箱地址不会被公开。 必填项已用*标注