割肝救母戏曲:inline-block引起的空白问题

来源：百度文库 编辑：中财网 时间：2024/04/28 22:13:43
inline-block引起的空白问题
2010-08-30 14:39:21标签：空白inline-block
原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处 、作者信息和本声明。否则将追究法律责任。http://younglab.blog.51cto.com/416652/385156
案例：制作一个水平的导航条
做法：使用li，设置inline-block使li横向显示
源代码：

li {
border:1px solid #000;
display:inline-block;
*display:inline; /*for IE6、IE7*/
zoom:1; /*for IE6、IE7*/
}


  • 链接

  • 链接

  • 链接

  • 链接

  • 链接


效果：如图

可以看到，除了IE6、IE7以外的浏览器，每个li之间都有一段空白。
注：IE6、IE7不支持inline-block;因此不会出现问题。
解决方法一般有三种：
1.将源代码中所有的li都放在同一行：

  • 链接
  • 链接
  • 链接
  • 链接
  • 链接


2.换一种方式格式化源代码：

  • 链接>
  • 链接>
  • 链接>
  • 链接>
  • 链接


3.设置ul的font-size为0，再设置li的font-size为正常值

ul {
font-size:0;
}
li {
display:inline-block;
border:1px solid #000;
font-size:14px;
}

这样，空白就被去掉了：

本文出自 “阳阳的学习笔记” 博客，请务必保留此出处http://younglab.blog.51cto.com/416652/385156
inline 的语法问题 空白短信的问题 inline 语法 IE地址栏空白的问题，。 请问head block、brim block 和headband block在中文里的意思是什么？ 借条引起的问题~ 热气引起的问题 磁盘引起的问题！ 冲击波引起的问题!!!! 冲击波引起的问题 !! !! !! 灌溉引起的问题 杀毒引起的问题 IE引起的问题 内存不足引起的问题 鼻炎引起的问题 风扇引起的问题。 CD-R空白光盘的问题 如何解决资源管理器是空白的问题 如何解决资源管理器是空白的问题 关于快捷方式变成空白的问题 英雄萨姆里面的Movable block怎么过？？ Lightscape Block Document的打开方式 PCI9054 Block DMA 是怎样工作的？ 怎样打开那些被block的网站?