问答详情
源自:3-5 企业网站制作之导航部分制作(二)

nav 不要float:left换成inline-block 是否可以

.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;

}


提问者:student19 2017-10-21 20:39

个回答

  • 慕运维2998853
    2017-10-23 19:11:35

    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