您应该使用display: inline-block
的标签(或
display: block
),因为有
display: inline
默认,但变形元素不能与display: inline
:
可变形元素 -由CSS盒模型控制布局的元素,该CSS盒模型可以是块级或原子内联级元素,也可以是...
内联块 —此值使元素生成内联级块容器。内联块的内部被格式化为块框,元素本身被格式化为原子内联级别框。
ul {
list-style-type: none;
}
ul a {
text-decoration: none;
padding-left: 20px;
background-repeat: no-repeat;
display: inline-block;
}
ul a:hover {
text-decoration: underline;
color: #666;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
a[href $= '.pdf'] {
background-image: url(http://i.stack.imgur.com/zJlYq.gif);
}
a[href $= '.doc'] {
background-image: url(http://i.stack.imgur.com/z2lbW.gif);
}
a[href $= '.ppt'] {
background-image: url(http://i.stack.imgur.com/Tk5Vv.gif);
}
a[href $= '.xls'] {
background-image: url(http://i.stack.imgur.com/sOr7E.gif);
}