导航栏链接未正确居中

Question

我用 header 和导航栏制作了一个简单的网页，但我遇到了这个小问题，它实际上非常烦人。链接不是 100% 在内联列表的中间，这里是截图： https://i.gyazo.com/105d8156e667277d0b31f18ba6a3b7db.png

为了防止混淆，整个页面居中，但屏幕截图只是导航栏部分。

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;
}

Answer 1

问题是应用于 ul 的默认填充，只需将填充归零即可：

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

JSFiddle

Answer 2

只需从 UL 中删除 padding 和 margin：

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

Answer 3

以上答案是正确的，但在理想情况下 <a> 应该有填充，所以将来如果我们想要 link 的背景颜色，它将占据整个块。

http://jsfiddle.net/5Lu5qjux/

导航栏链接未正确居中

Navbar links don't center properly

html

css

navbar

JSFiddle