概览

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

调试

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

分类: 前端开发

0 条评论

发表回复

Avatar placeholder

您的电子邮箱地址不会被公开。