0

検索バーまたはメニューバー検索項目を作成する前は、ヘッダーは見栄えが良かったです! ロゴとリンクの間の間隔が広く、画面の中央に配置されていました...など。現在、検索バーの左右に巨大なギャップがあり、すべてがページの右側に傾いています. menu-bar-overlay のサイズと、その中の 3 つの要素すべてのサイズを試してみました。過去 3 日間にグーグルで見つけたすべての提案を試しました。何も機能しません:/ スタック オーバーフロー、あなたは私の最後の希望です。助けてください。

私のスタイル.css

#main-container {

    width: 100%;
    min-height: 800px;
}

#menu-bar {
    max-width: 100%;
    height: 50px;
    background-image: url('../images/menu.jpg');
    background-repeat: repeat-x;
}

#menu-bar-overlay {
    width: 1450px;
    height: 50px;
    margin:0 auto;
}

#menu-bar-left {
    width: 250px;
    height: 50px;
    float: left;
    padding-right: 8px;
    background-image: url('../images/blog_small.png');
    background-repeat: no-repeat;
}

#menu-bar-right {
    float: left;
    width: 670px;
    height: 50px;

}

#menu-bar-right li {
    color: white;
    line-height: 15px;
    font-size: 14pt;
    font-family: "Arial Black";
    font-weight: normal;
    list-style: none;
    display: inline;
    border-right-style: groove;
    border-right-color: rgba(47,173,255,0.5); 
    padding-right: 8px;
}

#menu-bar-right li a:link, 
#menu-bar-right li a:active, 
#menu-bar-right li a:visited {
    color: white;
    text-decoration: none;
}

#menu-bar-right li a:hover {
    color: white;
    background-color: rgba(211,211,211,1);
    text-decoration: none;
}

#menu-bar-search {
    float: left;
    width: 300px;
    height: 50px;
}

私のheader.jsp

<div id="main-container">

    <div id="menu-bar">

        <div id="menu-bar-overlay">

            <div id="menu-bar-left"></div>

            <div id="menu-bar-right">

                <ul>
                    <li><a href="./index">Home</a></li>
                    <li><a href="./admin">Admin</a></li>
                    <li><a href="./addArticle">Add Article</a></li>
                    <li><a href="./admin">Update Article</a></li>
                    <li><a href="./admin">Delete Article</a></li>
                </ul>
            </div>
                <div id ="menu-bar-search">
                <form method = "post" action = "searchResults" name = "search">
                    <input type = "text" maxlength = "20" id = "search-field" required>
                    <input type = "submit" id = "search-button" value = "Search" style = "float:left; width:100px; margin-left:5px;">
                </form>
                </div>
        </div>
    </div>
    <div id="top-picture">
        <div id="picture-overlay-spacer"></div>
        <div id="picture-overlay"></div>
    </div>
    <div id="header-spacer"></div></div>
4

2 に答える 2

0

あなた#menu-bar-rightの幅は 670px で、コンテンツよりもかなり広いです。に設定するとauto、検索バーが左側に押し出されなくなります。

また、幅が300px#menu-bar-searchであるため、右側に余分なスペースがあるように見える場合があります。

最後に#menu-bar-overlay、幅が 1450px で、多くのシナリオで必要な幅よりも広い場合があります。広いので、他のコンテンツでは埋まりません。

例: http://jsfiddle.net/dThv6/

于 2013-07-25T20:59:25.397 に答える