问题描述
作为一个初学者,我正在完全基于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查找了大部分代码 但我仍然得到相同的压缩列表结果。感谢您抽出宝贵的时间阅读该文章。
解决方法
您只需要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>