< a href>的背景颜色列表中显示不正确 [英] background color of <a href> not displaying properly inside list
问题描述
我只是想通过将一些超级链接放在无序列表内的列表中来创建选项卡按钮.之后，当鼠标悬停在选项卡上时，我想更改选项卡的颜色.在我的以下代码中，我能够将颜色更改为绿色，但未覆盖选项卡，而是链接<a>
I'm just trying to create a tab buttons by putting some hyper links inside list within unordered list. After then i want to change the color of tab when mouse is hovered over it. In my below code i was able to change the color to green but it's not covering the tab, instead some space exists on right and left side of link <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>
推荐答案
查看此小提琴: http://jsfiddle.net/easwee/z5DG6/3/
您的a必须是一个块元素，以使其占据li的全宽.还从li删除了填充，并将其添加到only中.您可以玩js小提琴.
Your a has to be a block element so that it takes full width of your li. Also removed padding from li and added it to a only. You can play with js fiddle.
这篇关于< a href>的背景颜色列表中显示不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
