這是為什么?
<!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; 這個樣式的問題