用float或inline-block使其宽度由内容撑开
.boxL{ display: inline-block; background: url('boxL.png') no-repeat left 0 ;}.boxR{ background: url('boxR.png') no-repeat right 0;}.box{ background: url('boxM.jpg') repeat-x; font: 14px/30px "宋体"; color: white; padding: 1px 10px 0; margin: 0 8px;}
关于我们
两层嵌套
两层嵌套，文字只能写到最里面的div里，局限是文字最多只能到父级div的宽度，适用于图片比较小或者拓展要求小，比如按钮。
.boxR{ display: inline-block; background: url('boxR.png') no-repeat right 0;}.boxB{ background: url('boxB.jpg') repeat-x; font: 14px/30px "宋体"; color: white; padding: 1px 10px 0 18px; margin-right: 8px;}
关于我们
绝对定位
用绝对定位做的滑动门有兼容性，因为在IE6下，绝对定位父级的宽度(高度)是奇数的话，元素的right(buttom)就会有1px的偏差，且无解。
.boxL{ position: absolute; top: 0; left: -9px; width: 9px; height: 31px; background: url('boxL.png') no-repeat right 0;}.boxR{ position: absolute; top: 0px; right: -9px; width: 9px; height: 31px; background: url('boxR.png') no-repeat right 0;}.box{ position: absolute; background: url('boxM.jpg') repeat-x; font: 14px/30px "宋体"; color: white; padding: 1px 10px 0; margin: 30px;}
关于我们
实现效果
本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源：php中文网
