html/css解决inline-block内联元素间隙的多种方法总汇

时间: 2017-12-08阅读: 955标签: 方法

display有几种属性:
inline是内联对象,比如<a/> 、 <span/>标签等,可以“堆在一起”显示,宽高由内容决定,不能设置;
block是块对象,比如<div/>、<p/>标签等,要占一整行,但是宽高可以自定义;
为了弥补inline和block的不足,又扩充了inline-block属性;inline-blcok可以将对象呈递为内联对象,而内容作为块对象呈递。

但是display:inline-block;在IE6/7中不兼容:解决办法:

display:inline-block;*dsiplay:inline;*zoom:1;


为什么会有间隙

inline元素之间本身就存在间隙,是不是这个间隙引起的呢?最终原因是由于inline元素中间的空白符引起的,解决办法:就是去掉空白符。


解决方案

1、改变书写结构

<ul>
    <li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li>
</ul>
<ul>
	<li>
		item1</li><li>
		item2</li><li>
		item3</li><li>
		item4</li><li>
		item5</li>
</ul>
<ul>
	<li>item1</li
	><li>item2</li
	><li>item3</li
	><li>item4</li
	><li>item5</li>
</ul>
<ul>
	<li>item1</li><!--
  --><li>item2</li><!--
  --><li>item3</li><!--
  --><li>item4</li><!--
  --><li>item5</li>
</ul>

以上几种均可以完美的达到去除间隙的作用。但是,从代码的可读性上看,或多或少有一些不足。如果使用到了打包工具或者自写脚本,在上线前将响应HTML代码打包成一行,即可。


2、使用font-size:0

.space {
    font-size: 0;
   -webkit-text-size-adjust:none;//兼容Chrome
}
.space a {
    font-size: 12px;
}

基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器,就是Chrome, 其默认有最小字体大小限制,因为,考虑到兼容性,我们还需要添加: -webkit-text-size-adjust:none;


3、使用margin负值

@media screen and (-webkit-min-device-pixel-ratio:0) { div { margin-right: -8px; } }/*谷歌 HACK 方法*/

除谷歌外的其他浏览器间隙是4px,使用margin:-4px; 唯独谷歌是 双倍的8px,需要给谷歌单独设置 margin:-8px; 


4、使用letter-spacing或word-spacing

.space {
    letter-spacing: -3px;
}
.space a {
    letter-spacing: 0;
}

该方法基本可以搞定所有浏览器 ,不过Opera浏览器下有蛋疼的问题:最小间距1像素,然后,letter-spacing再小就还原了。

.space {
    word-spacing: -6px;
   display: inline-table;/*兼容Chrome*/
}
.space a {
    word-spacing: 0;
}

word-spacing的负值只要大到一定程度,其兼容性上的差异就可以被忽略。因为,貌似,word-spacing即使负值很大,也不会发生重叠。


5、丢失结束标签

<ul>
	<li>item1
	<li>item2
	<li>item3
	<li>item4
	<li>item5
</ul>

此方法虽然可以解决此问题,但是在Doctype为xhtml时将报错,所有方法是否适用须视情况而定。


6、W3C推荐 导航方法(兼容IE6等)

<style type="text/css">
        body,div,h1,ul,li{margin:0; padding:0;}
        ul,li{list-style:none;}
        a{text-decoration: none;}
        .nav a{background: red;color:#fff;padding: 10px 20px;margin-right: -4px;line-height: 40px;*margin-right: -8px;/* ie 下面也是 -8px*/}
        @media screen and (-webkit-min-device-pixel-ratio:0) { .nav a { margin-right: -8px; } }/*谷歌 HACK 方法*/
        .nav ul li{display:inline;}
        .nav a:hover{text-decoration: underline;}
</style>
<div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">服装城</a></li>
            <li><a href="#">食品</a></li>
            <li><a href="#">团购</a></li>
            <li><a href="#">夺宝岛</a></li>
            <li><a href="#">闪购</a></li>
            <li><a href="#">金融</a></li>
        </ul>
</div>

不使用hack方法的话,每个li紧挨着即可,不要留空格等间隙。


7、YUI 3 CSS Grids的处理

.yui3-g {
    letter-spacing: -0.31em; /* webkit */
    *letter-spacing: normal; /* IE < 8 重置 */
    word-spacing: -0.43em; /* IE < 8 && gecko */
}
.yui3-u {
    display: inline-block;
    zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
}


8、其他方法

li {
    display:inline-block;
    background: orange;
    padding:10px;
    word-spacing:0;
    }
ul {
    width:100%;
    display:table;  /* 调教webkit*/
    word-spacing:-1em;
}

.nav li { *display:inline;}


结语

其他去除间距的方法肯定还有,欢迎大家通过评论方式进行补充。

站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/235

JavaScript 的 sort 方法

使用 sort() 方法对数组进行排序时,最好指定它的参数,否则会出现意料之外的结果,具体请往下看

js中Element.getBoundingClientRect()方法

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集合

前端常用60余种工具方法

邮箱,是否url地址,是否Symbol函数,是否Promise对象,是否Set对象,是否是微信浏览器,是否是爬虫,动态引入js,根据url地址下载

Js手动实现call和apply方法

需要考虑传入的thisArg的多种类型,将函数设置成thisArg的属性,来实现this的绑定,调用完成后需要delete该属性,使用eval来实现需要传参给该函数的情况

Number 常用方法汇总

toExponential()把对象的值转换为指数计数法。toFixed()把数字转换为字符串,并对小数点指定位数。toLocaleString()把数字转换为字符串,使用本地数字格式顺序。

JS获取当前时间戳的方法

第一种:获取的时间戳是把毫秒改成000显示,因为这种方式只精确到秒,第二种和第三种是获取了当前毫秒的时间戳。

php中heredoc与nowdoc的使用方法、定界符<<<的使用方法

Heredoc 结构就象是没有使用双引号的双引号字符串,这就是说在 heredoc 结构中单引号不用被转义。其结构中的变量将被替换,但在 heredoc 结构中含有复杂的变量时要格外小心。其对格式化输出内容时,比较有用 。

JS实现碰撞检测的方法分析

本文实例讲述了JS实现碰撞检测的方法。分享给大家供大家参考,具体如下:一个简单的碰撞检测例子,检测div1是否和div2发生碰撞,当div1碰到div2时,改变div2的颜色

Js的string.search()方法怎么用?

string.search()是JavaScript中的一个内置方法,用于搜索正则表达式和给定字符串对象之间的匹配。返回值:返回正则表达式与给定字符串对象之间的第一个匹配的索引,如果未找到匹配项则返回-1。

js中math方法_整理js中常用的math方法总结

记录下与Math有关的常用方法,如:求最大值、最小值等,或者是保留几位数啥的。本文主要介绍了JavaScript中Math对象的方法,具有一定的参考价值,下面跟着小编一起来看下吧

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广