0

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

我的风格.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

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

width: 300px; to width: 530px; or a little less
于 2013-07-25T19:58:37.407 回答
0

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

您#menu-bar-search的宽度也为 300 像素，这就是为什么它的右侧似乎有额外的空间。

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

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

于 2013-07-25T20:59:25.397 回答