关于使用display:inline-block制作水平居中导航条

admin查看全部>> 05-07

人气 7,374

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!

文章目录
[隐藏]

在css中,我们不得不谈到一个属性display,先来了解一下这个属性的取值。

display:none | block | inline | inline-block| list-item | run-in | compact |marker | table | inline-table| table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | inherit

取值特别多,如果要了解每个聚会的具体含义,请查询w3c相关文档。本文章主要探讨display:inline-block,我们看下display:inline-block的具体解释。将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。我们先来看实例1

css代码

html代码

效果图如下:


从实际效果中,我们看出ie7以下浏览器并没有达到对象效果,而是直接换行,下面我们修改一下对应代码,在ul.subnav li中添加下面代码,添加如下代码,

添加后效果请查看实例2。这时候ie7以下的浏览器,显示已经和火狐一致。添加*的原因也就是兼容于ie浏览器,这是css hack。那么现还有一个问题,就是每个li之间的空白间隔,这个是由于元素之间默认有空白字符造成,可以通过设置font-size:0;来改变。到此已经完全解决这个问题。
最终代码如下:

需要注意的是,display顺序,display:inline-block; *display:inline; *zoom:1;,其实如果要实现导航居中,只需要ul中添加text-align:center即可,最终效果实例3
ps:如果li的高度不一致时候会出现上下错位的情况,只需要添加vertical-align:top;即可解决问题。

在线预览本地下载网盘下载

相关作品
关于使用display:inline-block制作水平居中导航条:已吐槽 10 次
  1. 4楼
    逆风:

    楼下的 别人写的文章 你评论人家的主机! 不厚道! :mrgreen: 写的不错~ 赞一个!!

    2013-05-07 下午 4:01 [回复]
    • admin:

      风风哥,你这是不是在洗刷我哦。把自己该表达的表达清楚就可以了,加油。

      2013-05-07 下午 4:05 [回复]
      • 夏 伤:

        我汗颜。我才发现何老师的头像那么的猥琐。。。。。

        2014-05-22 上午 8:53 [回复]
        • admin:

          没有猥琐的心灵就不能支撑我强大的灵魂。

          2014-05-23 下午 4:22 [回复]
  2. 地板
    花花:

    先顶再看

    2013-05-07 下午 4:01 [回复]
    • admin:

      谢谢,使劲狂顶。

      2013-05-07 下午 4:04 [回复]
  3. 板凳
    D瓜哥:

    打开速度不错!顶一个~

    2013-05-07 下午 3:50 [回复]
    • admin:

      谢谢,国产主机是要比国际主机好。

      2013-05-07 下午 3:58 [回复]
  4. 沙发
    殤晴哒:

    顶!力顶创新!

    2013-05-07 下午 3:39 [回复]
    • admin:

      谢谢支持,欢迎继续来访。

      2013-05-07 下午 3:58 [回复]



会员登陆还没有账号 立即注册

用户登录

忘记密码 ?

用第三方帐号直接登录

微博账号登陆 QQ账号登陆