我尝试在网站页面顶部创建一个标题栏,但我在布局方面遇到了问题。以下是我想要的结果:
goal http://ambiguities.ca/images/goal.png
这是html:
<div id="page_wrapper">
<div id="header_wrapper">
<div id="banner_wrapper">
<div id="header_banner">
<div class="header_format">Site Name</div>
</div>
</div>
<div id="user_management">
<div class="header_format">Login / Register</div>
</div>
<div id="user_search">
<form method="post" action="?search">
<input id="search_box" type="search" name="search" autocomplete="off" placeholder="Search..." />
</form>
</div>
</div>
</div>
和css:
body{
margin:0;
padding:0;
}
#page_wrapper {
width: 100%;
min-width: 800px;
}
#header_wrapper {
width: 100%;
height: 30px;
background-color: #E6E6E6;
border-bottom-color: #D8D8D8;
border-bottom-style: solid;
border-bottom-width: 1px;
}
#banner_wrapper {
float: left;
width: 100%;
}
#header_banner {
margin: 0 180px 0 160px;
}
#user_management{
float: left;
height: 30px;
width: 160px;
margin-left: -100%;
border-right-color: #D8D8D8;
border-right-style: solid;
border-right-width: 1px;
}
#user_search {
padding-top: 2px;
float: left;
height: 30px;
width: 180px;
margin-left: -181px;
border-left-color: #D8D8D8;
border-left-style: solid;
border-left-width: 1px;
}
#search_box {
height: 26px;
width: 176px;
margin: 0;
}
.header_format {
font-family: Verdana;
font-size: 10px;
text-align: center;
line-height: 30px;
vertical-align: middle;
}
我知道这可能不是最有效的代码。我真正的问题在于,在user_search div中,当添加顶部的填充为2时,搜索框将通过鼠标单击变得不可用。如果有人能指导我朝着正确的方向帮助我,或者向我展示更好的方法,那将非常感激。
答案 0 :(得分:1)
首先,从'#user_search'中删除'padding-top'值,使用以下CSS:
#user_search {
float: left;
height: 30px;
width: 180px;
margin-left: -181px;
border: 1px solid #D8D8D8;
}
其次,在'#search_box'中添加'margin-top'值,这应该可以解决问题。
#search_box {
height: 26px;
width: 176px;
margin: 5px 0 0 0;
}