1

<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">

拡大すると、左側に奇妙な境界線があることがわかります。高さをいじってみましたが、変わりません。

4

1 に答える 1

5

現在の 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/

于 2013-03-23T02:33:52.673 に答える