display將a設(shè)置成了塊狀元素為什么背景顏色設(shè)置時(shí)還是只顯示字體部分的背景
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>頁(yè)碼的制作</title>
<style>
/*在此定義相關(guān)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>
<!--在此制作頁(yè)碼的基本結(jié)構(gòu)-->
<div>
? <ul>
? ? <li><a href="">首頁(yè)</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="">末頁(yè)</a></li> ?
? ? ??
? ? ??
? </ul> ?
? ??
</div>
</body>
</html>
2016-08-06
你在li上設(shè)置了padding:5px 10px;，導(dǎo)致li與a之間有距離了，把內(nèi)填充設(shè)置到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;
? ? }
??