display將a設置成了塊狀元素為什么背景顏色設置時還是只顯示字體部分的背景
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>頁碼的制作</title>
<style>
/*在此定義相關CSS樣式*/
div ul li a {
? ??
? ? text-decoration:none;
? ? display:inline-block;}
? ? div ul li ?{
? ? list-style:none;
? ? float:left;
? ??
? ? margin:5px;
? ? padding:5px 10px;
? ? border:1px solid #e8e8e8;
? ? }
??
a:hover,a:active{
? ? background-color:red;
?
</style>
</head> ??
<body>
<!--在此制作頁碼的基本結構-->
<div>
? <ul>
? ? <li><a href="">首頁</a></li>
? ? <li><a href="">< </a></li> ?
? ? <li><a href="">1</a></li> ?
? ? <li><a href="">2</a></li> ?
? ? <li><a href="">3</a></li>
? ? <li><a href="">...</a></li> ?
? ? <li><a href="">></a></li> ?
? ? <li><a href="">末頁</a></li> ?
? ? ??
? ? ??
? </ul> ?
? ??
</div>
</body>
</html>
2016-08-06
你在li上設置了padding:5px 10px;，導致li與a之間有距離了，把內(nèi)填充設置到a上就行了
2016-07-27
div ul li a {
? ??
? ? text-decoration:none;
? ? display:inline-block;
padding:5px 10px;}
? ? div ul li ?{
? ? list-style:none;
? ? float:left;
? ??
? ? margin:5px;
? ??
? ? border:1px solid #e8e8e8;
? ? }
??