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