這是為什么?
<!DOCTYPE?HTML>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/>
<title>內聯塊狀元素</title>
<style?type="text/css">
a{
????letter-spacing:50px;
width:8px;height:50px;/*在默認情況下高度不起作用*/
background:pink;/*設置背景顏色為粉色*/
text-align:center;?/*設置文本居中顯示*/
????display:inline-block;
}
a>span{
????text-align:left;
}
</style>
</head>
<body>
<a><span>12</span></a>
<a>3</a>
<a>4</a>
</body>
</html>
為什么只有1加了粉色背景,2沒有加粉色背景?
2017-01-12
首先你把a標簽設置為inline-block,你設置的letter-spacing: 50px,比你a內聯塊元素的寬度還要大導致2跑出去了,你可以去掉letter-spaing屬性,增加a標簽的寬度,再試試!另外,a>span是沒有作用的,因為span是行內元素!
2017-01-12
width:8px;這個寬度太小,改得足夠大就能看到2也是粉色了。
你規定了寬度和高度,那么背景色就是填充這個高度和寬度所覆蓋的那個矩形。
2017-01-12
?display:inline-block; 這個樣式的問題