css - 新手的烦恼，怎么给<hr>元素设置粗细

Question

下面是HTML的问题部分：

<p id="main">
  <p>
    <h1>领先的 Web 技术教程 - 全部免费</h1>
    <p>*************</p><hr>
  </p>
</p>

下面是CSS的部分：

hr{
    height:2px;/*无效？？*/
}

本来想在文字底下设置分隔线，就用 <hr> 元素，现在想对 <hr> 标签设置粗细，没有反应？？CSS和HTML连接良好，其他样式设置都没有问题，求各位路过的好心人帮帮小弟，小弟正在入门阶段。

Answer 1

各浏览器对于<hr>元素的解析是有细微区别的。

具体到这里来说，某些浏览器，比如FF，它的<hr>默认就是2px，一明一暗两条线。所以设置2px是不会生效的。

试试修改：http://jsfiddle.net/ronesam/q02ba8qr/

解决方案：

hr {
    margin-top:7px;
    *margin: 0;
    border: 0;
    color: black;
    background-color: black; 
    height: 1px
}

其中：

1. margin-top:7px;*margin: 0;是解决ie和ff matgin-top不一致的问题；

2. border: 0; 是去掉ff的一条阴影线；

3. color: black; 是设置ie老版本水平线的颜色；

4. background-color: black; 是设置FF下水平线的颜色；

5. height: 1px;是设置水平线的高度，当然你也可以把它设置2px，3px；

参考：http://www.css88.com/archives/942

PS：

• <p>标签代表段落，里面最好不要再有其它标签；

• <hr>、<br>之类的空标签，最好写成：<hr />、<br />；符合规范，易于阅读。

<p id="main">
  <p>领先的 Web 技术教程 - 全部免费</p>
  <p>*************</p>
  <hr />
</p>

Answer 2

hr {
    border: 0;
    border-bottom: 2px solid black;
}

Answer 3

hr {
    height : 2px; // 高度
    background : #000;// 背景色，一般来说设置了高度之后背景色默认白色了，所以加一个背景色为黑色
}

Answer 4

第一点，hr标签最好闭合，这样写<hr/>。
第二点如果分割线的话，可以使用里面p元素的border-bottom属性，这样比较友好，而且样式可以自定义