---我尝试了修改代码的所有建议,但是搜索栏位于"更多"之前。选项卡,或者只是不改变最终输出。还有什么想法吗?
好的我正试图重新创建BBC网站。在我尝试添加搜索栏的过程中,它似乎将我的顶栏放在自己的下方,我不知道如何解决问题。我将发布代码(约120行,不多)以及指向参考站点的链接,希望有人知道如何处理这个问题。
http://www.bbc.com/news/technology ----我试图在顶部栏中进行操作,将您带到网站的其他部分(即标有&#34的顶部标签;新闻,体育,天气,...等等#34;但就像我说的那样,代码使我的搜索栏结束。My code.
#topbar {
width: 800px;
margin: 0 auto;
height: 40px;
}
body {
margin: 0 auto;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
#logo {
margin-top: 8px;
float: left;
margin-right: 8px;
}
.topbar-section {
float: left;
border-left: 1px #CCCCCC solid;
height: 100%;
}
#signin-text {
font-weight: bold;
font-size: 90%;
position: relative;
top: 11px;
padding-right: 65px;
}
#signin-image {
width: 25px;
margin: 9px 15px;
float: left;
}
.topbar-menu {
font-weight: bold;
font-size: 80%;
padding: 10px 14px 0px 14px;
height: 27px;
}
#more-arrow {
width: 6px;
margin-left: 65px;
}
#search-box {
background-color: #E4E4E4;
border: none;
font-weight: bold;
font-size: 14px;
padding: 5px;
margin: 7px 0px 7px;
float: left;
}
#search-icon {
height: 26px;
margin-top: 7px;
background-color: #E4E4E4;
}

<div id="topbar">
<img id="logo" src="images/bbc-blocks-dark.png">
<div id="signin-div" class="topbar-section">
<img id="signin-image" src="images/signinimage.png">
<span id="signin-text">Sign in</span>
</div>
<div class="topbar-section topbar-menu">News</div>
<div class="topbar-section topbar-menu">Sport</div>
<div class="topbar-section topbar-menu">Weather</div>
<div class="topbar-section topbar-menu">Shop</div>
<div class="topbar-section topbar-menu">Earth</div>
<div class="topbar-section topbar-menu">Travel</div>
<div class="topbar-section topbar-menu">
More
<img id="more-arrow" src="images/more-arrow.png">
</div>
<div class="topbar-section topbar-menu">
<input id="search-box" type="text" value="Search">
<input type="image" id="search-icon" src="images/search-icon.png">
</div>
</div>
&#13;
答案 0 :(得分:0)
将工具栏增加到1000px并在搜索区域右侧执行浮动。
这是更新后的代码
#topbar {
width: 1000px;
margin: 0 auto;
height: 40px;
}
body {
margin: 0 auto;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
#logo {
margin-top: 8px;
float: left;
margin-right: 8px;
}
.topbar-section {
float: left;
border-left: 1px #CCCCCC solid;
height: 100%;
}
#signin-text {
font-weight: bold;
font-size: 90%;
position: relative;
top: 11px;
padding-right: 65px;
}
#signin-image {
width: 25px;
margin: 9px 15px;
float: left;
}
.topbar-menu {
font-weight: bold;
font-size: 80%;
padding: 10px 14px 0px 14px;
height: 27px;
}
#more-arrow {
width: 6px;
margin-left: 65px;
}
#search-area {
float: right;
}
#search-box {
background-color: #E4E4E4;
border: none;
font-weight: bold;
font-size: 14px;
padding: 5px;
//margin:7px 0px 7px;
float: left;
}
#search-icon {
height: 26px;
// margin-top: 7px;
background-color: #E4E4E4;
}
<div id="topbar">
<img id="logo" src="images/bbc-blocks-dark.png">
<div id="signin-div" class="topbar-section">
<img id="signin-image" src="images/signinimage.png">
<span id="signin-text">Sign in</span>
</div>
<div class="topbar-section topbar-menu">
News
</div>
<div class="topbar-section topbar-menu">
Sport
</div>
<div class="topbar-section topbar-menu">
Weather
</div>
<div class="topbar-section topbar-menu">
Shop
</div>
<div class="topbar-section topbar-menu">
Earth
</div>
<div class="topbar-section topbar-menu">
Travel
</div>
<div class="topbar-section topbar-menu">
More
<img id="more-arrow" src="images/more-arrow.png" </div
<div id="search-area">
<input id="search-box" type="text" value="Search">
<input type="image" id="search-icon" src="images/search-icon.png">
</div>
</div>