即使在正确的代码之后也没有显示填充

Question

作为一个完全的初学者，我正在制作一个完全基于 html 和 css 的网站...不过我遇到了一个问题 - 列表中的 a 标签没有被填充无论我在这两种代码中尝试做什么......我都试图想出一个原因，但无法想出一个。请查看 html 和 css 错误代码。谢谢。 the website image looks like this. 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 中查找了大部分代码但我一直得到相同的压缩列表结果。感谢您花时间阅读本文。

Answer 1

您只需要 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>

即使在正确的代码之后也没有显示填充

No padding displayed even after correct code

html

css

padding

html-lists