Question

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

Answer 1

浏览器和操作系统之间的奇怪渲染不匹配可能是某处无效代码的标志。实际上，你错过了<div id="navigation>中的结束语。将其更改为<div id="navigation">。使用代码验证程序 - http://validator.w3.org/或http://jigsaw.w3.org/css-validator/ - 是轻松识别这些问题的好方法。

Answer 2

#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％”

如何使导航菜单出现在标题内？

2 个答案: