我有一个关于 html 列表项的问题要问。我一直在寻找答案，但没有找到适合我的问题的答案。
ul {
margin: 0 auto;
padding: 0px;
list-style-type: none;
}
li {
width: 25%;
display: inline;
float: left;
text-align: center;
}
a {
display: block;
font-size: 32px;
width: 140px;
background-color: #A0A0A0;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #282828;
}
.navbardiv {
margin: 0px;
background-color: #A0A0A0;
height: 50px;
}
a:link,a:visited {
display: inline-block;
text-decoration: none;
}
a:hover,a:active {
background-color: #B8B8B8;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="TestSiteCSS.css">
</head>
<body>
<div class="navbardiv">
<ul>
<li><a href="Page1.html">Home</a></li>
<li><a href="Page2.html">Forum</a></li>
<li><a href="Page3.html">Videos</a></li>
<li><a href="Page4.html">Contact</a></li>
</ul>
</div>
</body>
</html>那么我的问题是，如何将整个列表项设为一个链接，我尝试了一个示例，将它们设为一个链接，其中包含一个段落，但这没有用。我想准确保留链接的字体和大小，这就是为什么我找不到答案的原因。因此，如果您能回答我的问题，我们将不胜感激。
提前致谢!
最佳答案
我认为最简单的解决方案(即对代码更改最少的解决方案)是将 a 标记的 width 更改为 100%。但是，您应该考虑更改您的 HTML 结构以使用另一个答案中建议的 nav 标签。
ul {
margin: 0 auto;
padding: 0px;
list-style-type: none;
}
li {
width: 25%;
display: inline;
float: left;
text-align: center;
}
a {
display: block;
font-size: 32px;
width: 100%;
background-color: #A0A0A0;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #282828;
}
.navbardiv {
margin: 0px;
background-color: #A0A0A0;
height: 50px;
}
a:link,a:visited {
display: inline-block;
text-decoration: none;
}
a:hover,a:active {
background-color: #B8B8B8;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="TestSiteCSS.css">
</head>
<body>
<div class="navbardiv">
<ul>
<li><a href="Page1.html">Home</a></li>
<li><a href="Page2.html">Forum</a></li>
<li><a href="Page3.html">Videos</a></li>
<li><a href="Page4.html">Contact</a></li>
</ul>
</div>
</body>
</html>关于html - 使列表项成为链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27311127/