1

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

2 回答 2

1
#nav_holder {
position:absolute
top:0
background-color: #888888;
height: 40px;
min-width: 100%;
padding: 15px 0px;
}
#navigation {
position:absolute
top:0
#navigation {
float:left;
margin-left: 33px;
}

确保添加

position:absolute
top:0

对于这两者,尽管“top:0”可以是任何东西,但请确保它们相同。例如,如果您希望它居中,请将其设置为“top:30%”

于 2012-12-07T02:43:23.047 回答
1

浏览器和操作系统之间奇怪的渲染不匹配可能是某处无效代码的标志。确实,您在<div id="navigation>. 将其更改为<div id="navigation">. 使用代码验证器 - http://validator.w3.org/http://jigsaw.w3.org/css-validator/ - 是轻松识别这些问题的好方法。

于 2012-12-06T23:58:12.190 回答