html - 水平线的 HR 标签不起作用

Question

我不知道为什么我的<hr>样式不起作用。基本上我只想要一条水平黑线分隔我的元素。

这是我的网站

CSS

/* Horizontal Line */
.line_break {
    width:1000px;
    height: 5px;
    float: left;
    color: black;
    padding-top: 3px;
    background-color: rgba(255,255,255,.5);
}

HTML

<!---Navigation Menu ______________________________________________-->

    <div id="main_menu" class="wrapper_nav_box">
            <div class="nav_box">
                <a href="writing.html">WRITING</a> 
            </div>
            <div class="nav_box">
                <a href="http://tumblr.com">BLOG</a>
            </div>
            <div class="nav_box">
                <a href="contact.html">CONTACT</a>
            </div>
    </div>

    <hr class="line_break">

如果放大，您会看到左侧有一个奇怪的边框。我试过弄乱高度，但它永远不会改变。

Answer 1

您可以通过对当前 CSS 进行一些编辑来做到这一点。

CSS：

.line_break {
    //width:1000px;
    //height: 5px;
    //float: left;
    //color: black;
    //padding-top: 3px;
    //background-color: rgba(255,255,255,.5);
    border: none;  // remove default style
    border-bottom: 3px solid black;  //apply style
}

示例：http: //jsfiddle.net/PPYqx/