如何使用<hr>元素在CSS中正确添加多条水平分割线

你给所有<hr>设置了position: absolute绝对定位，还固定写死了top: 110px的定位值。绝对定位的元素会脱离正常文档流，所有套用这个样式的hr都会被层叠放在距离最近的定位父级顶部110px的同一个位置，完全重叠在一起，所以视觉上只能看到1条——实际上后续的hr都已经渲染了，只是全堆在同一个坐标上被盖住了。
另外你代码里写的down: 0px是无效CSS属性，CSS定位规则里只有top/right/bottom/left四个方向属性，不存在down，写了也不会产生任何效果。

如果要让多个分割线跟着页面内容顺序排布，各自出现在对应的分隔位置，直接删掉所有绝对定位相关的属性就行，保留你原本写好的尺寸、颜色、边距配置：

hr {   
   width: 90%;    
   height: 7px;    
   margin-left: 50px;    
   margin-right: auto; 
   background-color: #911637;    
   border: 0 none;    
}

如果你确实需要某一个分割线固定在页面特定位置，不要给所有hr统一加绝对定位，给需要特殊定位的hr单独加class，单独写定位规则，就不会出现所有分割线堆叠的问题。

内容的提问来源于stack exchange，提问作者Isam Adnan