由于a标签属于内联元素,无高度和宽度属性,因此控制鼠标经过状态改变背景颜色时,仅在有文字的地方显示背景颜色。解决的办法是把a标签变为块级元素,display:block
li { 50px; height:30px; list-style-type:none; line-height:30px; text-align:center; float:left; } a { display:block; } a:link,a:visited { color:#000; text-decoration:none; } a:hover,a:active { background-color:#BE3948; color:#FFF; text-decoration:none; }
inline-block元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。