如何将导航栏居中并定位在横幅图像的底部答案

【问题标题】：How To Center Navigation Bar And Position Atop Bottom Section of Banner Image如何将导航栏居中并定位在横幅图像的底部
【发布时间】：2013-03-07 06:55:12
【问题描述】：

只是一个警告，我是 HTML 和 CSS 的新手。请耐心等待我的询问。

我试图将导航栏置于中心，同时将其重叠在横幅的底部。我在顶部有一个横幅图像，而主要内容的背景图像位于导航栏的正下方。我尝试添加以下内容：

ul.navbar li {
 float: left}

这会将导航栏直接浮动在主体背景下方，而不是所有内容上方。为了以水平格式获取列表，我使用了

ul.navbar li {
 display: inline-table}

这是唯一可以为我提供我正在寻找的正确水平格式的变体。现在我只需要它居中并覆盖在横幅图像的底端。有什么建议么？我的 HTML 和 CSS 如下：

CSS：

body {

padding-left: 9em;

font-family: Georgia, "Times New Roman", Times, serif;

color: #6699FF;

background-color: white 

}

div#contentareamain1 {

background: url(contentareamain1.png) no-repeat;

background-color: white;

color: white;

height: 634px;

position: relative;

}

div#contentareamain1text {

position: relative;

height: auto;

width: 700px;

left: 5em;

top: 4em;

}

#header {

float:left;

width:100%;

height:87px;

}

.wrap {

position:relative;

margin:0 ;

}

ul.navbar {

list-style-type: none;

padding: 0.3em;

margin: 0;

top: 2em;

left: 5em;

width: 15em;

}

h1 {

font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif 

}

ul.navbar li {

background: rgb(157,193,255);

margin: 0.5em ;

padding: 0.3em;

border-bottom: 1em solid black; 

text-align: center;

display: inline-table;

}

ul.navbar a:hover {

color: blue;

background-color: #00FFFF;

}

ul.navbar a {

text-decoration: none;

}

HTML：

<body>

<div id="header">

<div class="wrap">

<img src="banner.png"/>

</div><ul class="navbar">

<p> <li><a href="index.html">Home</a> </p>

<p> <li><a href="services.html">Services</a> </p>

<p> <li><a href="inspireme.html">Training</a> </p>

</ul>

<div id="contentareamain1" no-repeat>

<div id="contentareamain1text"><p>

</p></div>

</div>

非常感谢您！

【问题讨论】：

标签： css navbar

【解决方案1】：

首先你应该检查你的 HTML 结构——似乎缺少一个结束 DIV 标记，你应该删除列表元素周围的包装 P 元素。

试试这个：

<div id="header">
<div class="wrap">
    <img src="banner.png"/>
</div>
<ul class="navbar">
    <li><a href="index.html">Home</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="inspireme.html">Training</a></li>
</ul>
</div>

在你只需要给你的标题图片这个 CSS 之后：

 display:block; margin:0 auto; position:relative;

ul.navbar 需要这样的东西：

 margin:0 auto; float:none; position:relative; top:-35px; width:500px;

并且您应该删除 div#contentareamain1 的相对位置以使此代码正常工作。

 div#contentareamain1 { (…) /*position: relative;*/ }

【讨论】：

如果 ul.navbar 确实具有已知宽度，这将起作用。如果不是 margin:0 auto;不会生效，因为它的宽度默认为 100%。

【解决方案2】：

你真的应该访问 W3C 并学习你的 HTML :)

HTML

<div id="header">
    <img src="" />
    <ul class="navbar">
        <li><a href="#">Link text</a></li>
        <li><a href="#">Link text</a></li>
        <li><a href="#">Link text</a></li>
    </ul>
</div>
<div id="content-area>

</div>

您的 HTML 包含一些不属于那里的<p>-标签。另外我猜你希望你的内容在标题之外？

CSS （我只给你一个例子，如何将你的导航栏放在你的标题中心，其余的由你决定）

#header {
    position:relative;
    z-index:1;
    text-align:center;
}
#header img {
    position:inherit;
    z-index:inherit;
}
#header ul.navbar {
    position:relative;
    z-index:2;
    margin:0 auto;
    top:-35px;
    list-style-type:none;
}
#header ul.navbar li {
    display:inline-block;
}
#header ul.navbar li a {
    display:block;
    padding:4px 8px;
    background-color:blue;
    color:white;
    text-decoration:none;
}

您可以在jsFiddle 上查看正在运行的代码并尝试使用它。希望对你有所帮助。

【讨论】：