以下のコードを使用して、ヘッダーとコンテナーを形成できます。Mac では、ナビゲーション メニュー (ul/li) がそのままヘッダーに表示されます。私は Mac を使用していますが、Windows コンピューターでページを表示すると、検索ボックスと #other_navigation がヘッダーの下に表示されます。
ここで何が問題なのかわかりませんか？#boxer と #other_navigation メニューを使用した css フォーマットにあると確信していますが、何がわからないのですか。
HTML:
<div id="nav_holder">
<img src="/logo.png" id="logo_holder" height="50">
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Friends</a></li>
<li><a href="#">Contacts</a></li>
<li><form action="#" method="post"></li>
<input id="boxer" type="text">
</form>
</ul>
</div>
<div id="other_navigation">
<ul id="other_navi_holder">
<li><a href="#">Settings</a></li>
<li><a href="#">Logout</a></li>
</ul></div>
</div>
<div id="centering">
</div>
CSS:
body {
margin: 0px;
padding: 0px;
}
#logo_holder {
margin-left: 80px;
float:left;
}
#nav_holder {
background-color: #888888;
height: 40px;
min-width: 100%;
padding: 15px 0px;
}
#navigation {
float:left;
margin-left: 33px;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
line-height: 40px;
}
li {
display:inline;
padding: 30px;
}
#centering {
background-color: #000000;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
min-height: 500px;
width: 700px;
}
#boxer {
padding-left: 10px;
margin-left: 513px;
width: 200px;
height:20px;
position:absolute;
margin-top: -30px;
}
#other_navigation {
margin-left: 280px;
float:left;
}