Home  >  Q&A  >  body text

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

下面是HTML的问题部分:

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

下面是CSS的部分:

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

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

高洛峰高洛峰2647 days ago821

reply all(4)I'll reply

  • 高洛峰

    高洛峰2017-04-17 12:06:10

    各浏览器对于<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>

    reply
    0
  • PHP中文网

    PHP中文网2017-04-17 12:06:10

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

    reply
    0
  • ringa_lee

    ringa_lee2017-04-17 12:06:10

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

    reply
    0
  • 阿神

    阿神2017-04-17 12:06:10

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

    reply
    0
  • Cancelreply