最新消息:2014,为梦想加油,专注于前端开发!

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

未分类 admin 7637浏览 10评论
文章目录
[隐藏]

在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;即可解决问题。

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

转载请注明:专注于web前端开发 » 关于使用display:inline-block制作水平居中导航条

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (10)

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

    逆风2013-05-07 16:01 回复
    • 风风哥,你这是不是在洗刷我哦。把自己该表达的表达清楚就可以了,加油。

      admin2013-05-07 16:05 回复
      • 我汗颜。我才发现何老师的头像那么的猥琐。。。。。

        夏 伤2014-05-22 08:53 回复
        • 没有猥琐的心灵就不能支撑我强大的灵魂。

          admin2014-05-23 16:22 回复
  2. 先顶再看

    花花2013-05-07 16:01 回复
    • 谢谢,使劲狂顶。

      admin2013-05-07 16:04 回复
  3. 打开速度不错!顶一个~

    D瓜哥2013-05-07 15:50 回复
    • 谢谢,国产主机是要比国际主机好。

      admin2013-05-07 15:58 回复
  4. 顶!力顶创新!

    殤晴哒2013-05-07 15:39 回复
    • 谢谢支持,欢迎继续来访。

      admin2013-05-07 15:58 回复