在标题中轻松创建水平导航栏

Question

我有一个带有我的徽标和标题的标题。就在 Title Mobility 组的右侧，我想创建一个导航栏，该导航栏与标题底部的不同选项卡一直接触到标题的右侧。乱七八糟我能够创造一些东西，但我似乎无法正确定位它。

• http://jsfiddle.net/jHJK2/
• http://jsfiddle.net/jHJK2/embedded/result/

我只是不知道如何将此导航栏添加到我的标题 div。

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 代码：

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 {
    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;
}

更新

只是想说谢谢大家的帮助。

Answer 1

将您当前的方法调整为更多的 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;
}

这是你的updated fiddle

这里是右侧导航的更新，虽然有点乱：
http://jsfiddle.net/jHJK2/5/

Answer 2

不是 100% 确定这是否是您想要的，因为您的要求不是很明确，但这是我提出的。 http://jsfiddle.net/jHJK2/2/

变化：

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：

#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;
}

Answer 3

进行以下 CSS 更改：

Demo in jsFiddle

#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;
}