我製作了一個帶有頁眉和導航欄的簡單網頁，但是我遇到了這個小問題，這實際上很煩人。鏈接不是100％在內聯列表的中間，這裏是屏幕截圖： https://i.gyazo.com/105d8156e667277d0b31f18ba6a3b7db.png 導航欄鏈接沒有正確居中

爲了防止混淆，整個頁面居中，但屏幕截圖僅爲navbar部分。

的HTML：

<!DOCTYPE html> 
<html> 

<head> 
    <title>Test</title> 
    <link href="css/style.css" type="text/css" rel="stylesheet" /> 
</head> 

<body> 
    <h1>Test website</h1> 
    <div id="nav"> 
     <ul> 
      <li><a class="active" href="#">Home</a></li> 
      <li><a href="#">Second</a></li> 
      <li><a href="#">Third</a></li> 
      <li><a href="#">Fourth</a></li> 
      <li><a href="#">Fifth</a></li> 
     </ul> 
    </div> 
</body> 

</html>

CSS文件：

/* navigation bar */ 
#nav { 
    width: 490px; 
    margin: auto; 
    border-top: 1px solid black; 
    border-bottom: 1px solid black; 
} 

/* unordered list in navbar */ 
#nav ul { 
    text-align: center; 
} 

/* list items in navbar */ 
#nav li { 
    display: inline-block; 
} 

/* links in items of navbar */ 
#nav li a { 
    text-decoration: none; 
    margin: 20px; 
    font-family: Arial, sans-serif; 
    font-weight: bold; 
} 

/* header 1 */ 
h1 { 
    text-align: center; 
    font-family: Arial, sans-serif; 
    font-weight: bold; 
}

來源

2015-09-21 SJ19

的問題是，被應用到ul默認填充，只需歸零填充：

#nav ul { 
    text-align: center; 
    padding:0; 
}

JSFiddle

來源

2015-09-21 19:02:23 APAD1

很高興知道，歡呼！ – SJ19

單從UL取出padding和margin：

#nav ul { 
    text-align: center; 
    padding: 0; 
    margin: 0; 
}

來源

2015-09-21 19:04:12

上面的回答是正確的，但在理想的情況下<a>應該有填充所以在未來，如果我們希望有一個背景顏色爲鏈接，它會佔據整個街區。

http://jsfiddle.net/5Lu5qjux/

來源

2015-09-21 19:15:42

導航欄鏈接沒有正確居中

回答

JSFiddle

相關問題