#nav ul{
background:red;
height:51px;
line-height:51px;
text-align:center;
}
#nav ul li{
display:inline;
background:yellow;
height:51px;-------------这里的高度对li没有影响,那要怎么样才能使得每个li被调高了呢。
width:100px;
}
所以可以用先进的方法
#nav ul li{
display:inline-block;-------变成块。但是这个只有ie8支持
background:yellow;
height:51px;
width:100px;
}
所以解决方法是: 不用inline.....不用inline那么他就是block....然后再让block浮动即可。如果不浮动的话,区块就是一行
#nav ul li{
background:url(../images/rlink.jpg) no-repeat right center; ----在右边的中间加上一个分割符
height:51px;
width:124px;
float:left;
}
#nav ul li.end{
width:123px;
background:none;----最后一个分隔符是不要的。。。所以背景设置为none
}
#nav {
width:867px;
height:51px;
background:url(../images/linkbg.jpg); ----这张图片是一个小小的竖线,然后布满整个区域
}
#nav ul li a{ //a默认的是inline,所以只有点在文字链接上面才有反映,点在其他区域没有反映
display:inline-block; -----变成块,这样在这个区域上点击都有反映 而且都ie6,7,8都支持
}
background:red;
height:51px;
line-height:51px;
text-align:center;
}
#nav ul li{
display:inline;
background:yellow;
height:51px;-------------这里的高度对li没有影响,那要怎么样才能使得每个li被调高了呢。
width:100px;
}
所以可以用先进的方法
#nav ul li{
display:inline-block;-------变成块。但是这个只有ie8支持
background:yellow;
height:51px;
width:100px;
}
所以解决方法是: 不用inline.....不用inline那么他就是block....然后再让block浮动即可。如果不浮动的话,区块就是一行
#nav ul li{
background:url(../images/rlink.jpg) no-repeat right center; ----在右边的中间加上一个分割符
height:51px;
width:124px;
float:left;
}
#nav ul li.end{
width:123px;
background:none;----最后一个分隔符是不要的。。。所以背景设置为none
}
#nav {
width:867px;
height:51px;
background:url(../images/linkbg.jpg); ----这张图片是一个小小的竖线,然后布满整个区域
}
#nav ul li a{ //a默认的是inline,所以只有点在文字链接上面才有反映,点在其他区域没有反映
display:inline-block; -----变成块,这样在这个区域上点击都有反映 而且都ie6,7,8都支持
}