Question

我有一个标题和标题的标题。在Title Mobility组的右侧，我想创建一个导航栏，触摸标题的底部，标题右侧有不同的标签。在我周围乱搞我能够创造一些东西，但我似乎无法正确定位。

我无法弄清楚如何将此导航栏添加到我的标题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;
}

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

更新

3 个答案: