无法对齐标题图片下的导航栏

我一直在尝试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>

来源

2015-04-23 Jack Morgan

非常感谢大家！：3 –

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

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

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

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

来源

2015-04-23 21:36:06

随着小提琴这将是很容易知道什么问题，但试试这个：

#nav { 
 
    width: 100%; 
 
} 
 

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

来源

2015-04-23 21:40:04

您正在使用的代码段标记 - 您是如何了解它以及它在哪里记录的？ –

当您在此写回答时，您可以使用“Ctrl + M”创建片段！ –

你.nav是太窄它包装的内容。在浏览器中按F12以发现交互式调试工具。之后，花点时间学习引导。

来源

2015-04-23 21:40:11

无法对齐标题图片下的导航栏

回答

相关问题