转载>>去除inline-block元素间间距的N种方法《重》
一、现象描述
真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子:
<input /> <input type="submit" />
间距就来了~~(正确理解:inline,inlin-block;block)
我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题:
.space a {
display: inline-block;
padding: .5em 1em;
background-color: #cad5eb;
}
<div class="space">
<a href="##">惆怅</a>
<a href="##">淡定</a>
<a href="##">热血</a>
</div>
这种表现是符合规范的应该有的表现(如果有人认为是bug就太()ay ()oy 了)。
不过,这类间距有时会对我们布局,或是兼容性处理产生影响,需要去掉它,该怎么办呢?以下展示N种方法(欢迎补充)!
二、方法之移除空格
元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。考虑到代码可读性,显然连成一行的写法是不可取的,我们可以:
<div class="space">
<a href="##">
惆怅</a><a href="##">
淡定</a><a href="##">
热血</a>
</div>
或者是:
<div class="space">
<a href="##">惆怅</a
><a href="##">淡定</a
><a href="##">热血</a>
</div>
五、使用font-size:0
类似下面的代码:
.space {
font-size:;
}
.space a {
font-size: 12px;
}
这个方法,基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器,就是Chrome, 其默认有最小字体大小限制(不过目前浏览器已经取消这种限制)
类似下面的代码:
六、使用letter-spacing
类似下面的代码:
.space {
letter-spacing: -3px;
}
.space a {
letter-spacing:;
}
根据我去年的测试,该方法可以搞定基本上所有浏览器,包括吃“东鞋”、“西毒(胶囊)”、“南地(沟油)”、“北钙(三鹿)”的IE6/IE7浏览器,不过Opera浏览器下有蛋疼的问题:最小间距1像素,然后,letter-spacing
再小就还原了。
七、使用word-spacing
类似下面代码:
.space {
word-spacing: -6px;
}
.space a {
word-spacing:;
}
一个是字符间距(letter-spacing
)一个是单词间距(word-spacing
),大同小异。据我测试,word-spacing
的负值只要大到一定程度,其兼容性上的差异就可以被忽略。因为,貌似,word-spacing
即使负值很大,也不会发生重叠。
如果您使用Chrome浏览器,可能看到的是间距依旧存在。确实是有该问题,原因我是不清楚,不过我知道,可以添加display: table;
或display:inline-table;
让Chrome浏览器也变得乖巧。
.space {
display: inline-table;
word-spacing: -6px;
}
八、其他成品方法
下面展示的是YUI 3 CSS Grids使用letter-spacing
和word-spacing
去除格栅单元见间隔方法(注意,其针对的是block水平的元素,因此对IE8-浏览器做了hack处理):
.yui3-g {
letter-spacing: -0.31em; /* webkit */
*letter-spacing: normal; /* IE < 8 重置,IE6,支持属性前加(*或者_)其他不支持浏览器则会忽略此属性。IE7支持属性前加(*或+) */
word-spacing: -0.43em; /* IE < 8 && gecko, */
} .yui3-u {
display: inline-block;
zoom:; *display: inline; /* IE < 8: 伪造 inline-block 因为iE6,7不支持display:inline-block,zoom:1使IE元素拥有自己的布局haslayout=-1;
这中情况下,拥有自己布局的display:inline(haslayout=-1)在IE6,7 下类似与其他浏览器的dispaly:inline-block;所以说为伪造。
*/
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
}
以下是一个名叫RayM的人提供的方法:
li {
display:inline-block;
background: orange;
padding:10px;
word-spacing:;
}
ul {
width:100%;
display:table; /* 调教webkit*/
word-spacing:-1em;
} .nav li { *display:inline;}
转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
最新文章
- Atitit mac os 版本 新特性 attilax大总结
- 原生js通过prottype写的一个简单拖拽
- 莫队算法 2038: [2009国家集训队]小Z的袜子(hose)
- arcengine9.3与10开发授权代码
- thinkphp分页格式的完全自定义,直接输入数字go到输入数字页
- centos下yum安装crontab+mysql自动备份
- crawler_wireshark 过滤基础知识
- Windows下安装Redis数据库并实现C#访问
- python + selenium <;二>;
- NOIP2000提高组 单词接龙
- 如何用Fritzing实现元器件自定义接线图
- 基于IndexedDB实现简单文件系统
- RestTemplate 支持服务器内302重定向
- VS快捷键大全(总结了一些记忆的口诀)(转载)
- MySQL8.0安装
- win10 64位,家庭版,C++,ini配置说明
- Java 雇员管理小练习(理解面向对象编程)
- OSLab文件描述符
- MYSQL中group_concat有长度限制!默认1024(转载)
- 推荐的bootstrap之 formgroup表单布局样式
热门文章
- springmvc的ajax
- 63 网络编程(四)——TCP编程
- 「UNR#2」黎明前的巧克力
- Linux命令注释—HDFS运维
- 计算标准差——Python
- CorelDRAW 学习笔记(一)
- asp.net core web的导入导出excel功能
- Echarts X轴多项百分比的展示
- Vue -- 项目报错整理(2):IE报错 - ‘SyntaxError:strict 模式下不允许一个属性有多个定义‘ ,基于vue element-ui页面跳转坑的解决
- Android 指定调用已安装的某个“相机”App