使列表项成为链接

时间:2014-12-05 07:42:49

标签: html css

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

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

提前致谢!

3 个答案:

答案 0 :(得分:0)

最简单的解决方案(也就是代码更改量最少的解决方案)我认为将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>

答案 1 :(得分:0)

您的解决方案如下。

出于好奇,你在哪里学习HTML / CSS?

&#13;
&#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;
&#13;
&#13;

答案 2 :(得分:0)

只需添加宽度: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;
}