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

【问题标题】：How do I make the navigation menu appear inside the header?如何使导航菜单出现在标题内？
【发布时间】：2012-12-06 23:48:33
【问题描述】：

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

【问题讨论】：

标签： html css menu navigation

【解决方案1】：

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

【讨论】：

嘿，解决了这个问题，但还是一样。
嗯。您能否为我更清楚地描述您想要的结果； IE哪个部分是header？
抱歉不清楚。标题是#nav_holder，它包含徽标和导航菜单。我希望所有这些菜单选项和搜索框都出现在#nav_holder 中。
您的标记仍有一些问题：您已关闭</nav>，但您从未打开过一个。您在<ul> 中有一个<form>，但在<li> 中没有。（在某些文档类型中可能没问题，您使用的是什么文档类型？）很抱歉，在您的代码修复之前，我无法提供任何好的建议。
哎呀！抱歉，我一直在处理这个问题，看起来我很乱。让我修复它，修复后我会在这里发表评论。

【解决方案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%”

【讨论】：