温馨提示，我是 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>
提前非常感谢！
首先您应该检查您的 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;*/ }
您真的应该访问 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 上查看正在运行的代码并试用它。 希望对你有一点帮助。