無法對齊標題圖片下的導航欄

我一直在嘗試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

無法對齊標題圖片下的導航欄

回答

相關問題