我用标题和导航栏制作了一个简单的网页,但我遇到了这个实际上非常烦人的小问题.内联列表中间的链接不是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;
}
问题是正在应用的默认填充ul,只是填充填充:
#nav ul {
text-align: center;
padding:0;
}