Question

我有一个问题要问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>

那么我的问题是，如何将整个列表项目作为链接，我已经尝试过一个示例，使它们在一个带有段落的链接中，但是没有用。我想要准确地保留链接的字体和大小，这就是为什么我找不到答案的原因。所以如果你能回答我的问题，我将不胜感激。

提前致谢！

Answer 1

最简单的解决方案（也就是代码更改量最少的解决方案）我认为将width标记的a更改为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>

Answer 2

您的解决方案如下。

出于好奇，你在哪里学习HTML / CSS？

＆＃13;

* { margin:0; padding:0 }

nav {
  background: grey;
}

nav a {
  color: initial;
  text-decoration: none;
  display: inline-block;
  padding: 4px;
  margin: 10px 0;
}

nav a:hover {
  background: lightgrey;
}

＆＃13;

<nav>
    <a href="Page1.html">Home</a>
    <a href="Page2.html">Forum</a>
    <a href="Page3.html">Videos</a>
    <a href="Page4.html">Contact</a>
</nav>

＆＃13;

Answer 3

只需添加宽度：100％;比如你的{}选择器

a {
    display: block;
    font-size: 32px;
    width: 100%; /* instead of 140px; */
    background-color: #A0A0A0;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #282828;
}

使列表项成为链接

3 个答案: