作为一个完全初学者，我正在制作一个完全基于html和css的网站。。。不过我遇到了一个问题——无论我在两个代码中做什么，列表中的a标签都没有被填充。。。我试着想一个原因，但找不出一个。请查看错误的html和css代码。谢谢网站图片如下。html&css代码如下：
ul{
display: block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
li{
float: left;
}
li a{
display: block;
color: white;
text-align: center;
padding: 16 px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/styles.css">
<title>abc's official website</title>
</head>
<body>
<nav>
<ul>
<li><a href="/index.html">Home</a></li>
<li><a href="/articles.html">Articles</a></li>
<li><a href="/books.html">Books</a></li>
<li><a href="/awards.html">Awards</a></li>
<li><a href="/shortstories.html">Shortstories</a></li>
<li><a href="/about.html">About</a></li>
</ul>
</nav>
<div>
<p>Welcome to <br><span> abc's</span> <br>official website</p>
</div>
</body>
</html>但在你看了网站图片后，(我在html和css上尝试了ctrl+s，然后在实时服务器上再次运行，但没有效果(水平列表中没有空格或填充。此外，我从https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu但我一直得到同样的压缩列表结果。感谢您花时间阅读本文。
您只需要padding: 16px而不是padding: 16 px。
ul {
display: block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/styles.css">
<title>abc's official website</title>
</head>
<body>
<nav>
<ul>
<li><a href="/index.html">Home</a></li>
<li><a href="/articles.html">Articles</a></li>
<li><a href="/books.html">Books</a></li>
<li><a href="/awards.html">Awards</a></li>
<li><a href="/shortstories.html">Shortstories</a></li>
<li><a href="/about.html">About</a></li>
</ul>
</nav>
<div>
<p>Welcome to <br><span> abc's</span> <br>official website</p>
</div>
</body>
</html>