我只是想通过在无序列表中的列表中放置一些超链接来创建一个选项卡按钮。然后我想在鼠标悬停在它上面时更改选项卡的颜色。在我下面的代码中，我能够将颜色更改为绿色，但它没有覆盖选项卡，而是在链接的右侧和左侧存在一些空间 <a> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
#header ul {
list-style: none;
margin: 0;
}
#header li {
float: left;
padding:10px;
padding-left:12px;
border: 1px solid #bbb;
background:red;
margin: 0;
}
#content {
clear:both;
}
#header a {
text-decoration: none;
padding: 10px;
text-align: center;
color:#000000;
}
#header a:hover {
background:#00FF00;
}
#header{
position:relative;
top:20px;
}
#content{
position:relative;
top:60px;
}
</style>
</head>
<body>
<div id="header">
<h1></h1>
<ul>
<li><a href="#">This</a></li>
<li id="selected"><a href="#">That</a></li>
<li><a href="#">The Other</a></li>
<li><a href="#">Banana</a></li>
</ul>
</div>
<div id="content">
<p>CONTENT HERE .....</p>
</div>
</body>
</html>
最佳答案
除了 float:left;padding:0;margin:0，将所有样式放在 A 标签上，不是 LI 标签。在 A 标签上使用 diplay:block 启用边距和填充。
请参阅我的教程:I love lists
关于html - <a href> 的背景颜色无法在列表中正确显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5622997/