文档章节

去除inline-block元素间的空隙

大橙子zc
 大橙子zc
发布于 2016/03/22 16:47
字数 519
阅读 27
收藏 0

inline-block元素在布局时会给我们带来很多方便,但它有一个明显的bug,就是inline-block元素间会有一个4px的间隙(有的浏览器可能是8px)。废话不多说了,直接讲解决方法吧。

总体来时可分为两种方法,一种是改变html结构法,另一种是css法。

先说第一种,比如下面这段代码:

1
2
3
4
5
6
< ol >
    < li >首页</ li >
    < li >关于我们</ li >
    < li >联系我们</ li >
    < li >加入我们</ li >
</ ol >

假设 li 是 inline-block元素,则 li 间会出现讨厌的空隙,这时我们可以换个写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
< ol >
    < li >首页</ li
    >< li >关于我们</ li
    >< li >联系我们</ li
    >< li >加入我们</ li >
</ ol >
< ol >
    < li >
    首页</ li >< li >
    关于我们</ li >< li >
    联系我们</ li >< li >
    加入我们</ li >
</ ol >
< ol >
    < li >首页</ li > <!--
    --> < li >关于我们</ li > <!--
    --> < li >联系我们</ li > <!--
    --> < li >加入我们</ li >
</ ol >

 

以上三种写法都是可以的,总之就是避免让 </li>与<li>之间出现书面上的空格。

还有一种写法是去除闭合标签,如:

1
2
3
4
5
6
< ol >
    < li >首页
    < li >关于我们
    < li >联系我们
    < li >加入我们
</ ol >

这种写法因为不符合html规范,所以还是避免使用为好

 

第二种是css解决方法。思路是把inline-block元素的父元素的font-size设为0,letter-spacing和word-spacing设为负数,然后再在inline-block元素中把这几个值恢复正常即可。

1
2
3
4
5
6
7
8
9
10
11
12
ul{
   font-size : 0 ;
   letter-spacing : -4px ; /*实际情况下 -4这个值可能还要调整*/
   word-spacing : -4px ;   /*实际情况下 -4这个值可能还要调整*/   
}
ul li{
   display :inline-bolck;
   zoom: 1 ;
   font-size : 12px ;
   letter-spacing : normal ;
   word-spacing : normal ;
}

貌似我还看到过一种js方法,思路大概是通过移除inline-block元素之间的文本节点来实现的,但能用css解决的东西就别动用js啦。


本文转载自:http://www.cnblogs.com/2050/archive/2012/05/16/2504081.html

大橙子zc
粉丝 0
博文 19
码字总数 2899
作品 0
程序员
私信 提问
inline-block 前世今生

曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; display:inline; zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了,上面的代码只是...

GIFCOOL
2012/09/04
120
0
除去display:inline-block的间隙!

去除inline-block元素间的空隙 引用 原文:http://www.cnblogs.com/2050/archive/2012/05/16/2504081.html

风趣幽默的程序猿
2016/08/25
100
0
拜拜了,浮动布局-基于display:inline-block的列表布局

一、一抹前言 没有爱的日子,时间如指尖细沙,不知不觉就流逝了。写“CSS float浮动的深入研究、详解及拓展(一)”和“CSS float浮动的深入研究、详解及拓展(二)”似乎就在不久前,然而相隔差...

林文安
2012/06/01
110
0
display:inline-block作用解释

inline-block 的元素既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性,比如 inline-block 元素也可以设置 vertical-align 属性。 HTML...

半途而醒
2015/01/29
151
0
去除inline-block元素间间距的N种方法

一、现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="submit" /> 间距就来了~~ 我们使用CSS更改非inlin...

i33
2012/09/28
105
1

没有更多内容

加载失败,请刷新页面

加载更多

3_数组

3_数组

行者终成事
35分钟前
7
0
经典系统设计面试题解析:如何设计TinyURL(二)

原文链接:https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
今天
7
0
使用logstash同步MySQL数据到ES

概述   在生成业务常有将MySQL数据同步到ES的需求,如果需要很高的定制化,往往需要开发同步程序用于处理数据。但没有特殊业务需求,官方提供的logstash就很有优势了。   在使用logstas...

zxiaofan666
今天
10
0
X-MSG-IM-分布式信令跟踪能力

经过一周多的鏖战, X-MSG-IM的分布式信令跟踪能力已基本具备, 特点是: 实时. 只有要RX/TX就会实时产生信令跟踪事件, 先入kafka, 再入influxdb待查. 同时提供实时sub/pub接口. 完备. 可以完整...

dev5
今天
7
0
OpenJDK之CyclicBarrier

OpenJDK8,本人看的是openJDK。以前就看过,只是经常忘记,所以记录下 图1 CyclicBarrier是Doug Lea在JDK1.5中引入的,作用就不详细描述了,主要有如下俩个方法使用: await()方法,如果当前线...

克虏伯
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部