由于a标签属于内联元素,无高度和宽度属性,因此控制鼠标经过状态改变背景颜色时,仅在有文字的地方显示背景颜色。解决的办法是把a标签变为块级元素,display:block
li
{
width: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、元素的高度、宽度、行高以及顶和底边距都可设置。