水平线的HR标签不起作用

Question

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

Here是我的website

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/