无法在标题图像下对齐导航栏答案

【问题标题】：Can not align navigation bar under header image无法在标题图像下对齐导航栏
【发布时间】：2015-04-24 05:45:33
【问题描述】：

我已经尝试了 2 个小时来将导航栏很好地对齐在标题图像下方，但它不会这样做。前 4 个列表项连续对齐，但最后一个在它们下方，+导航栏不像我想要的那样居中。我到处寻找答案，但没有任何效果。帮助将不胜感激。 p.s.我是 css 和 html 的新手，所以要温柔。

<html>
<head>
<style>
body { 
    background-image: url("http://i.imgur.com/SwKXk23.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}
body {
    margin: 0;
}
.header {
    width: 100%;
    height: auto;
    background-color: none;
    padding-top: 24px;
}
.headerContent {
    width: 1024px;
    height: auto;
    margin: 0 auto;
}
.headerContent a img {
    width: 659px;
    height: 144px;
    margin: 0px auto;
    display: block;
}
.nav {
width:750px;
margin:0 auto;
list-style:none;
}
.nav li {
float:left;
}
.nav a {
display:block;
text-align:center;
width:150px; /* fixed width */
text-decoration:none; 
}
.nav ul li{
  height: 40 px;
  background: #A14F53;
}
.nav ul li{
list-style-type: none;
width: 150px;
float: left;
}
.nav ul li a{
text-decoration: none;
color: black;
line-height: 40px;
display: block;
border-right: 1px solid #CCC;
text-align:center;
}
.nav ul li a:hover{
background-color:#F9C1B5;
}
.headerBreak{
width: 100%;
height: o%;
border bottom: 2px solid #128e75;
}

</style>
</head>

<body>
<div class="background">
<div class="header">
        <div class="headerContent">
            <a href="#">
                <img style="border:0;width:900px;height:250px;" alt="" 
            title="" src="http://i.imgur.com/5NhCbxu.png">
            </a>
        </div>
    <div class="nav">
  <ul id="nav">
   <li><a href="Pagina principala.html">Pagina principala</a></li>
    <li><a href="Despre noi.html">Despre noi</a></li>
    <li><a href="Clienţii noştri.html">Clientii nostri</a></li>
    <li><a href="Produse.html">Produse</a></li>
    <li><a href="Contacte.html">Contacte</a></li>
  </ul>
</div>
</div>
<div class="headerBreak"></div>
</div>
</body>
</html>

【问题讨论】：

非常感谢大家！ :3

标签： html css navigationbar

【解决方案1】：

你没有给导航栏足够的宽度。更改 .nav 规则：

.nav {
  width:750px;  <------- adjust this
  margin:0 auto;
  list-style:none;
}

我将您的宽度更改为 800 像素而不是 750 像素，现在菜单适合一行并居中。

这是一个小提琴：https://jsfiddle.net/macg14fs/

【讨论】：

【解决方案2】：

您的.nav 对于内容来说太窄了，所以它已经换行了。在浏览器上按 F12 以发现交互式调试工具。之后，花一些时间学习引导程序。

【讨论】：

【解决方案3】：

使用 Fiddle 会更容易知道问题所在，但试试这个：

#nav {
  width: 100%;
}

#nav > li {
  display: inline-block;
  margin: 5px 5px 5px 5px;
  text-align: center;
}

【讨论】：

您正在使用的 sn-p 标记 - 您是如何了解它的以及它记录在哪里？
在这里写答案时可以使用“Ctrl + M”创建sn-ps！