inline-block元素的空白间距解决方法<转>
使用inline-block来代替float进行布局,或者使用inline-block来实现元素的居中效果。有关于使用inline-block来代替float的讨论也蛮多的。
不过就是使用inline-block的元素之间会存在“4px”的空白间距。那么今天我们就一起来说说这个“4px”的问题。
先看下代码
HTML部分:
1
2
3
4
5
6
7
|
< ul > < li >item1</ li > < li >item2</ li > < li >item3</ li > < li >item4</ li > < li >item5</ li > </ ul > |
CSS代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
*{ margin : 0 ; padding : 0 ; } ul { list-style : none outside none ; padding : 10px ; background : green ; text-align : center ; } ul li { display : inline- block ; * display : inline ; zoom: 1 ; background : orange; padding : 5px ; } |
明显的可以看出,在inline-block的元素之间存在“4px”的空白:
上面截图是:IE8-9、Firefox、Safari等浏览器下的效果,换句话说,这种现像只有在这几种浏览器中才会出现。下面我们就来说说解决这个“4px”(Chrome下是8px)的几种方法:
方法一:改变HTML结构
简单一点的方法就是就是改变HTML的结构,你可以使用下面几种方法的任何一种都可以达到效果:
结构一:
1
2
3
4
5
6
7
8
|
< ul > < li > item1</ li >< li > item2</ li >< li > item3</ li >< li > item4</ li >< li > item5</ li > </ ul > |
这种方法接近标签换行格式的写法,也更趋近阅读。
结构二:
1
2
3
4
5
6
7
|
< ul > < li >item1</ li >< li >item2</ li >< li >item3</ li >< li >item4</ li >< li >item5</ li > </ ul > |
结构二和结构一几乎是一样,结束标签的“>”成了另一行的起始标签。
结构三:
1
2
3
4
5
6
7
|
< ul > < li >item1</ li > <!-- --> < li >item2</ li > <!-- --> < li >item3</ li > <!-- --> < li >item4</ li > <!-- --> < li >item5</ li > </ ul > |
结构三的方法采用的是html的注释的方法,这种方法我想大家不太常见,不过同样能解决我们需要解决的问题。
结构四:
1
|
< ul >< li >item1</ li >< li >item2</ li >< li >item3</ li >< li >item4</ li >< li >item5</ li ></ ul > |
结构四,我想是大家常用来解决这样的问题的方法吧,下面我们来看看按上述几种方法写的效果:
方法一所说的是通过标签来解决,虽然问题是解决了,但可以说不能称作是技巧。而且上面的方法只适合于写静态页面的时候,一旦你的HTML不是自己写,而是后台生成,就比如CMS来说,标签后台生成,此时,我想大家又要骂街了,这可怎么办?其实我们除了上面的方法,还可以使用CSS来解决的。
方法二:负的margin
很多地方讨论使用负的margin来解决,比如说:
1
2
|
ul{ font-size : 12px ;} ul li{ margin-right : -4px ;* margin-right : 0 ;} |
这种解决方法并不完美,如果你的父元素设置的字号不一样,可能你的“-4px”就不能解决问题。况且在Chrome中你需要另外设置一个负的margin值才能实现同等的效果。
当然有些文章介绍使用”-0.25em”来解决,这也是跟元素的字号有极大的关系。
所以我个人建议不使用负的margin来解决这样的问题。
方法三:设置父元素字体为0
第三种方法设置父元素的字体为“0”,然后在“inline-block”元素上重置字体需要的大小。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
ul { list-style : none outside none ; padding : 10px ; background : green ; text-align : center ; font-size : 0px ; } ul li { display : inline- block ; * display : inline ; zoom: 1 ; background : orange; padding : 5px ; font-size : 12px ; } |
这样处理在Firexfox,chrome等浏览器下是达到了效果,可是在Safari下可问题依然存在:
按此来说,方法三也不是绝佳的好方法,用不用大家自己考虑。
方法四:丢失结束标签
说实在的,这种方法又回到了方法一,在html标签上动手脚。就是让“inline-block”元素丢失关闭标签
1
2
3
4
5
6
7
|
<ul> <li>item 1 <li>item 2 <li>item 3 <li>item 4 <li>item 5 </ul> |
样式基本不变,我们来看看效果:
这种方法虽然能达到各浏览器的兼容,但还是有一个前提,那就是“DOCTYPE”要选择对,在“XHTML”下可就问题又出来了。
方法五:jquery方法
最后在给大家提供一种jquery的方法:
HTML代码
1
2
3
4
5
6
7
|
< ul class = "removeTextNodes" > < li >item1</ li > < li >item2</ li > < li >item3</ li > < li >item4</ li > < li >item5</ li > </ ul > |
CSS代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
ul { list-style : none outside none ; padding : 10px ; background : green ; text-align : center ; font-size : 12px ; } ul li { display : inline- block ; * display : inline ; zoom: 1 ; background : orange; padding : 5px ; } |
jQuery 代码
1
2
3
|
$( '.removeTextNodes' ).contents().filter( function () { return this .nodeType === 3; }).remove(); |
最后一种方法是通过jQuery来改变“nodeType”的值,从而实现我们需要的效果。
上面讲述了多种方法,但要兼容多个浏览器版本,并不每种方法实用,以前常用的方法,这次测试并不兼容所有浏览器。要做到兼容所有浏览器,个人认为还是在html的标签上做一定的处理,或者采用最后一种方法,通过“jQuery”来改变“nodeType”值达到效果。
那么有关于“inline-block”的间距如何去除,今天就扯到这了,希望这篇文章对喜欢用inline-block的童鞋有所帮助。如果您有更好的方法,记得与我们一起分享,欢迎在下面的评论中留下您的经验,或者指正上面的不对之处。
更新:全兼容的样式解决方法
经过高人指点,使用纯CSS还是找到了兼容的方法,就是在父元素中设置font-size:0,用来兼容chrome,而使用letter-space:-N px来兼容safari:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.finally-solve { letter-spacing : -4px ; /*根据不同字体字号或许需要做一定的调整*/ word-spacing : -4px ; font-size : 0 ; } .finally-solve li { font-size : 16px ; letter-spacing : normal ; word-spacing : normal ; display :inline- block ; * display : inline ; zoom: 1 ; } |
转自 http://blog.csdn.net/clh604/article/details/8295856
inline-block元素的空白间距解决方法<转>的更多相关文章
- inline-block元素的空白间距解决方法
方法1 <ul><li>item1</li><li>item2</li><li>item3</li><li&g ...
- inline-block元素的空白间距
inline-block元素的空白间距 html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- 排错-windows平台下访问oracle em出现空白的解决方法
排错-windows平台下访问oracle em出现空白的解决方法 by:授客 QQ:1033553122 问题描述 IE浏览器本地访问oem,出现空白页面,就左上角有一行字符 http://loca ...
- 如何解决inline-block元素的空白间距 css 完美解决
转载W3CPLUS,链接地址:http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements 有关于使用inli ...
- 如何解决inline-block元素的空白间距
早上在博客中有人提了这样一个问题:“li元素inline-block横向排列,出现了未知间隙”,我相信大家在写页面的时候都遇到过这样的情况吧. 我一般遇到这情况都会把li浮动起来,这样就没有间隙.但是 ...
- 使用CSS如何解决inline-block元素的空白间距
早上在博客中有人提了这样一个问题:“li元素inline-block横向排列,出现了未知间隙”,我相信大家在写页面的时候都遇到过这样的情况吧. 我一般遇到这情况都会把li浮动起来,这样就没有间隙.但是 ...
- 去除行内(inline/inline-block)元素之间的间距
先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...
- div内的img下出现几像素的空白间距解决办法
现象描述: 解决方法: 1.设父元素的font-size:0; 2.设img为display:block; 3.设img为vertical-align:middle;
- 打开 chm 帮助文件显示空白及解决方法
有个很奇葩的解决方法:把 chm 文件用压缩软件压缩,然后用压缩软打开此压缩包,直接双击压缩包里面的 chm 文件 这虽然解决了问题,但是这不科学…… 分析:直接打开压缩包里面的文件,压缩包的文件是临 ...
随机推荐
- Error: Cannot find module 'express' 之 解决方案
出现如题错误,是因为执行了#npm install -g express的缘故,express没有被写到package.json里面去. 解决也好办,在程序目录下执行#npm install expr ...
- Discuz常见小问题-如何禁止用户发言,快速删除某个用户的所有帖子
用户-用户组,勾选批量编辑,然后点击批量编辑的链接 点击论坛相关-帖子相关,然后把指定用户组的允许发新话题设置为否,拉到底部,点击提交 以一个普通用户重新登录,尝试发帖报错,说明已经设置成功 ...
- 你们对LinearLayout线性布局中Layout_weight的误解
帮人找个入门级别的书得负责任,自己先看一下有无缺陷,结果发现这个:(原文发在该书的论坛上,发现受众面太小了,无奈转到这个弃用很久的博客里,以后把心得慢慢发上来) Google Android开发入门与 ...
- Linux 监测磁盘常用的工具sar iostat vmstat
Linux 检测内存常用的工具sar iostat vmstat #每秒刷新一次显示2次 sar -d 1 2 iostat -kx 1 2 vmstat -d 1 2 磁盘统计信息解释 tps 每秒 ...
- 〖Android〗(CM10.2)Android4.2/4.3中的boot.img打包方法(合适三星exynos4 CPU)
#!/bin/bash - #=============================================================================== # # F ...
- 21-spring学习-springMVC实现CRUD
结合业务层实现一共完成CRUD操作 1,定义一共IMessageServese接口 package com.SpringMVC.Service; import java.util.Map; impor ...
- Ubuntu和windows文件共享问题
ubuntu访问windows共享文件夹(ubuntu桌面系统): 最简单的方法,随便打开一个文件夹,按Ctrl+L,然后地址栏敲smb://xxx.xxx.xxx.xxx(wind ...
- CRC文件解压缩问题
CRC问题一般有三种可能1.你的硬盘出现坏道2.你的硬盘数据线受损3.还可能是主板和内存的问题 硬盘坏道的表现硬盘使用久了就可能出现各种各样的问题,而硬盘“坏道”便是这其中最常见的问题.硬盘出现坏道除 ...
- C#:向SqlServer数据库中插入imange类型
using System; using System.Collections.Generic; using System.Linq; using System.Runtime.InteropServi ...
- IO多路复用之poll
1.基本知识 poll的机制与select类似,与select在本质上没有多大差别,管理多个描述符也是进行轮询,根据描述符的状态进行处理,但是poll没有最大文件描述符数量的限制.poll和selec ...