Html 在标题中轻松创建水平导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17605803/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a horizontal nav bar easily in a header
提问by Krishp
I have a certain Header with my Logo and title. Just to the right of the Title Mobility group I want to create a nav bar that touches the bottom of the header with different tabs all the way to the right of the header. Messing around I was able to create something, but I can't seem to position it correctly.
我有一个带有我的徽标和标题的标题。就在 Title Mobility 组的右侧，我想创建一个导航栏，该导航栏与标题底部的不同选项卡一直接触到标题的右侧。我可以创造一些东西，但我似乎无法正确定位它。
I just can't figure out how to add this navigation bar to my header div.
我只是不知道如何将此导航栏添加到我的标题 div。
HTML code:
HTML代码：
<div id="page">
<div id="header">
<a href="http://wireless.fm.intel.com/test/index.php">
<img src="http://wireless.fm.intel.com/test/logo2.png" border=0 >
</a>
<h2><a href="http://moss.ger.ith.intel.com/sites/MWG-IS/Pages/Default.aspx" border=0>Mobility Group</a></h2>
<div id="navigation">
<a href="#">About</a>
<a href="#">Reports</a>
<a href="#">Documents</a>
<a href="#">Checklists</a>
<a href="#">License Tools</a>
<a href="#">Presentations</a>
<a href="#">Software Releases</a>
</div>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
CSS Code:
CSS 代码：
html, body {
padding:0;
margin:0;
height:100%;
}
#page {
min-height:100%;
position:relative;
height:100%;
}
#header {
background-color:#115EA2;
height:100px;
width:97.5;
}
#main {
width:1300px;
margin-left:auto;
margin-right:auto;
background-color:#F1F2F3;
min-height:90%;
height:auto;
height:89%;
margin:0 auto -50px;
vertical-align:bottom;
}
#footer {
position:fixed;
width:100%;
bottom:0;
height:35px;
background-color: #115EA2;
}
#header img {
float:left;
display:inline;
}
#header h2 {
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
font-family: Sans-serif;
float:left;
margin-top:20px;
margin-left:20px;
text-decoration:none;
}
#header h2, a, a:visited, a:hover, a:active {
color: #FFFFFF;
text-decoration: none;
}
Navigation Bar Code:
导航条码：
#navigation {
position:relative;
top:0;
left:0;
right:0;
bottom:0;
width:70%;
background-color:gray;
color:green;
height:35px;
text-align:center;
padding-top:15px;
}
#navigation a {
font-size:14px;
padding-left:15px;
padding-right:15px;
color:black;
text-decoration:none;
}
#navigation a:hover {
color:blue;
}
Update
更新
Just wanted to say Thank you all for your help.
只想说谢谢大家的帮助。
采纳答案by lukeocom
Adapting your current method to a more html5 approach, you can use headerand navtags do better markup your document. Absolute positioning also gives you better control over your elements. You would set the header to a relative position, and the nav to absolute, and offset it by the height of your header.
将您当前的方法调整为更 html5 的方法，您可以使用header和nav标签更好地标记您的文档。绝对定位还可以让您更好地控制元素。您可以将标题设置为相对位置，将导航设置为绝对位置，并将其偏移标题的高度。
nav {
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
min-width: 800px;
text-align: left;
height: 20px;
padding: 10px 20px;
}
Here is your updated fiddle
这是你更新的小提琴
And here is an update with the nav to the right, a bit messy though:
http://jsfiddle.net/jHJK2/5/
这是右侧导航的更新，虽然有点乱：http:
//jsfiddle.net/jHJK2/5/
回答by Swarnamayee Mallia
Make the following CSS changes:
进行以下 CSS 更改：
#header {
background-color:#115EA2;
height:100px;
width:97.5;
position: relative;
}
#navigation {
position:absolute;
/* top:0;
left:0;*/
right:0;
bottom:0;
width:70%;
background-color:gray;
color:green;
height:35px;
text-align:center;
padding-top:15px;
}
回答by taylorc93
Not 100% sure if this is how you want it since your request wasn't very clear, but here's what I made. http://jsfiddle.net/jHJK2/2/
不是 100% 确定这是否是您想要的，因为您的要求不是很清楚，但这是我所做的。 http://jsfiddle.net/jHJK2/2/
Changes:
变化：
HTML:
HTML：
<div id="header">
<div id="navigation"> //moved this before the other elements
<a href="#">About</a>
<a href="#">Reports</a>
<a href="#">Documents</a>
<a href="#">Checklists</a>
<a href="#">License Tools</a>
<a href="#">Presentations</a>
<a href="#">Software Releases</a>
</div>
<a href="http://wireless.fm.intel.com/test/index.php">
<img src="http://wireless.fm.intel.com/test/logo2.png" border=0>
</a>
<h2><a href="http://moss.ger.ith.intel.com/sites/MWG-IS/Pages/Default.aspx" border=0>Mobility Group</a></h2>
</div>
CSS:
CSS：
#navigation {
width:100%;
background-color:gray;
color:green;
height:35px;
text-align:center;
padding-top:15px;
}
#navigation a {
font-size:14px;
padding-left:15px;
padding-right:15px;
color:black;
text-decoration:none;
}
#navigation a:hover {
color:blue;
}
