我制作了一个带有标题和导航栏的简单网页，但我遇到了这个实际上非常烦人的小问题。链接不是 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;
}
最佳答案
关于html - 导航栏链接未正确居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32702670/