Question

在我创建搜索栏或菜单栏搜索项之前，标题看起来很棒！徽标和链接之间的间距很大，它们以屏幕为中心......等等。现在搜索栏的左侧和右侧有一个GIANT间隙，所有内容都靠在页面的右侧。我玩过菜单栏覆盖尺寸和其中所有三个元素的大小，我已经尝试了过去三天我发现的每一个建议。什么都行不通：/堆栈溢出，你是我最后的希望。请帮忙。

我的style.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

尝试更改条形搜索的大小？

width: 300px; to width: 530px; or a little less

Answer 2

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

你的#menu-bar-search也有300px的宽度，这就是为什么它可能看起来在它右边有额外的空间。

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

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

HTML标题麻烦。为什么有间距？

我的style.css

我的header.jsp

2 个答案: