滑动门解决方案

滑动门是基于精灵图技术和内边距的一种应用,一般应用于子导航中的菜单布置.效果为一个li,这个li的宽度不固定,会随着放入的字数增加而宽度增加
1.不用精灵图,仅仅使用背景色代替精灵图的滑动门:
这样的菜单只需要padding即可,而且不需要再额外多一个span,只需要一个a即可,但是切记不能用margin,不然虽然菜单会随着字数的多少扩大,但是如果有hover后背景改变特效的话效果不一样,而且一般不是我们想要的效果

2.用精灵图的滑动门(主要是用精灵技术做菜单的边框):
核心技术为:用一个a标签包住一个span标签,a标签设置padding-left+边框距离,span设置padding-right+边框距离,并且把span的背景图的background-position改为left,意为右对齐
tips:如果设置了行高,就不用设置height也可以把盒子撑开

注:若不浮动的话a和span至少要设置成inline-block 如果浮动的话可以设置成block,也可以设置成inline-block,但是不能设置成inline a和span都不要设置宽度,需要自适应宽度