.nav {
height: 40px;
}
.nav_left {
height: 40px;
width: 10px;
background: url(../images/nav_left.jpg) left no-repeat;
display: inline-block;
margin-left:-375px;
}
.nav_mid {
height: 40px;
width: 990px;
background: url(../images/nav_bg.jpg) repeat-x;
line-height: 40px;
display: inline-block;
margin-left:-9px;
}
.nav_right {
margin-left: -9px;
height: 40px;
width: 10px;
background: url(../images/nav_right.jpg) no-repeat;
display: inline-block;
}
display:inline
inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display:inline-block
简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
一个是块级元素,另一个是行内元素
出处网站http://www.cnblogs.com/KeithWang/p/3139517.html