HTML header 问题。为什么会有间距？

Question

在我创建搜索栏或菜单栏搜索项之前，标题看起来很棒! Logo 和链接之间的间距很大，它们在屏幕上居中……等等。现在搜索栏的左侧和右侧有一个巨大的间隙，所有内容都靠在页面的右侧。我已经尝试过菜单栏覆盖大小和其中所有三个元素的大小，我已经尝试了过去三天我在谷歌搜索中发现的每一个建议。没有任何效果:/堆栈溢出，你是我最后的希望。请帮忙。

我的样式.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>

Answer 1

#menu-bar-right 的宽度为 670px，比其内容宽得多。尝试将其设置为 auto，然后它将停止将您的搜索栏推到左侧。

您的 #menu-bar-search 也有 300 像素的宽度，这就是为什么它的右侧可能看起来有额外空间的原因。

最后，#menu-bar-overlay 的宽度为 1450px，在许多情况下可能比您想要的要宽。因为它太宽了，其他内容将无法填满它。

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