JSFiddle

Question

我制作了一个带标题和导航栏的简单网页，但我遇到了这个实际上非常烦人的小问题。链接不是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>应该有填充，以便将来如果我们想要为链接设置背景颜色，它将占用整个块。

at least on OS X

导航栏链接无法正确居中

3 个答案:

JSFiddle