即使在正确的代码之后也没有显示填充[关闭]答案

【问题标题】：No padding displayed even after correct code [closed]即使在正确的代码之后也没有显示填充[关闭]
【发布时间】：2021-01-22 07:40:34
【问题描述】：

作为一个完全的初学者，我正在制作一个完全基于 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 查找了我的大部分代码但我不断得到相同的压缩列表结果。感谢您抽出宝贵时间阅读本文。

【问题讨论】：

这只是一个错字——16 和 px 之间有一个空格。单位前不能有空格，所以应该是16px

标签： html css html-lists padding

【解决方案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>

【讨论】：

我没有投反对票，但仅供参考，对于低质量问题（例如这个问题）的正确操作是标记它们，或者如果问题需要更多详细信息，那么您可以在 cmets 中询问更多信息。或者干脆直接转向问得很好的问题 :) 否则我们只是鼓励提出更多糟糕的问题 :) 请参阅How do I write a good answer? 中的“回答问得很好的问题”部分。
非常感谢，我当时很困惑！