CSS問題中心NavBar

所以，基本上是我最後一次做任何網頁開發，只有HTML，並且我沒有了任何基本的瞭解。所以現在，我在追趕並試圖學習CSS。我的問題是水平導航欄，它不能保持完美居中。我試着調整寬度，邊框和邊距，但我錯過了一些東西。CSS問題中心NavBar

用我目前的佈局，左邊比右邊多了一些空白，我被卡住了。

這裏的的jsfiddle：

CSS：

<!-- JASCO NAVBAR --> 
ul 
{ 
width:100%; 
list-style-type: none; 
margin-left:auto; 
margin-right:auto; 
padding:none; 
overflow:hidden; 
} 

li 
{ 
align:center; 
width:20%; 
margin:0; 
padding:0; 
display:inline-block; 
list-style-type: none; 
} 
a:link,a:visited 
{ 
display:block; 
width:100%; 
font-weight:bold; 
font-size:20px; 
color:#FFFFFF; 
background-color:#FF6103; 
text-align:center; 
padding:5px; 
text-decoration:none; 
font-variant:small-caps; 
} 
a:hover,a:active 
{ 
background-color:#000000; 
color:#FF6103; 
} 

#container { 
    width:100% 
} 

<!-- TOP CSS--> 
.top { 
position:absolute; 
width:80%; 
height:10%; 
margin-left:auto; 
margin-top:20px; 
margin-right:auto; 
color:#000000; 
padding:0; 
} 

<!-- CONTENT CSS--> 
.content { 
position:absolute; 
width 100%; 
margin-left:10px; 
margin-right:10px; 
padding:3px; 
color:#dddddd; 
} 

#img 
{ 
} 

<!-- TOP IMAGE CSS--> 
img.center { 
display:block; 
margin-left:auto; 
margin-right:auto; 
}

HTML：

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="jascostyle.css"> 
<title>Single"Frame" Test</title> 
</head> 

<body> 
<div id="container"> 
    <center> 
    <div class="top"> 
    <img class ="center" width="80%" height="5%" href="#temp" src="#temp" alt="JASCO ENERGY"/> 
    <ul> 
    <li><a href="#home">Home</a></li> 
    <li><a href="#news">News</a></li> 
    <li><a href="#contact">Contact</a></li> 
    <li><a href="#about">About</a></li> 
    </ul> 
    </div> 


    <div class="content"> 
    <h1>This is under construction!</h1> 
    </div> 
    </div> 
    </body> 
</html>

我很欣賞在這個問題上的任何幫助/解釋。

謝謝。

來源

2013-01-15 Ramrod

您需要固定寬度+ margin-left:auto和margin-right:auto。你不應該爲你的內容使用絕對定位 - 讓它自然流動。

<center>標記已被棄用，因此對於寬度爲960px;的外部「容器」包裝使用相同的技術。

ul { 
    width:500px; 
    list-style-type: none; 
    margin-left:auto; 
    margin-right:auto; 
    padding:0; 
}

一般使用基於列表的菜單的時候，您的李用float:left，請使用A-標籤display:block，並把所有其他造型的A-標籤，而不是名單本身。我的教程：I Love Lists。

來源

2013-01-15 22:29:34

對不起，延遲響應，所以我試圖改變。它仍然不是很中心（我也更新了JSFiddle）另外，爲什麼指定像素寬度而不是百分比？我非常希望導航欄能夠調整大小，除非有很大的理由我不應該這樣做。 – Ramrod

CSS問題中心NavBar

回答

相關問題