在我创建搜索栏或菜单栏搜索项之前,标题看起来很棒!徽标和链接之间的间距很大,它们以屏幕为中心......等等。现在搜索栏的左侧和右侧有一个GIANT间隙,所有内容都靠在页面的右侧。我玩过菜单栏覆盖尺寸和其中所有三个元素的大小,我已经尝试了过去三天我发现的每一个建议。什么都行不通:/堆栈溢出,你是我最后的希望。请帮忙。
#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;
}
<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>
答案 0 :(得分:0)
尝试更改条形搜索的大小?
width: 300px; to width: 530px; or a little less
答案 1 :(得分:0)
您的#menu-bar-right
宽度为670像素,比内容宽得多。尝试将其设置为auto
,然后它会停止将搜索栏推到左侧。
你的#menu-bar-search
也有300px的宽度,这就是为什么它可能看起来在它右边有额外的空间。
最后,#menu-bar-overlay
的宽度为1450像素,在许多情况下可能比您想要的宽。由于它太宽,其他内容将无法填满。