使用下面的代码,我可以形成一个标题和一个容器。在 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;
}