5种方法去掉HTML中Inline-Block元素之间的空白

记得年轻时我在IE6上开发,绝望的希望IE6能支持display: inline-block功能。
当需要在”inline”元素上控制margin和padding时,inline-block属性值变得非常有用,有了它,
你不在需要让这些元素去“block”和“float”。但有一个问题,当使用inline-block时,
HTML元素之间的空白会显示在页面上。很讨厌。有几种方法可以除去这些空白;其中一个非常巧妙。
方法0:各元素间不留任何空白

一个100%能解决这个问题的方法是在你的HTML代码里元素间不留任何空白:
<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>

当然,这样看起来很乱,让代码不好维护,但很实用,很直观,更重要的……很可靠。
方法1:在父元素上设置font-size: 0

解决这个空白问题最好的方案是在这些inline-block元素的父元素上设置font-size: 0。
如果你的<UL>里有inline-block的<LI>,那你可以这样做:
.inline-block-list { /* ul or ol with this class */
font-size: 0;
}

.inline-block-list li {
font-size: 14px; /* put the font-size back */
}

为了不让父元素的字体大小影响子元素,你需要重新在子元素上设置font-size值,这通常很简单。
唯一可能遇到麻烦的情况是你用相对大小设置字体。但大多数时候,这样的方法能解决你的问题。
方法2:HTML注释

这种方法有点暴力,但同样能奏效。将HTML元素间用注释填充,这跟它们之间没有空白效果一样:
<ul>
<li>Item content</li><!--
--><li>Item content</li><!--
--><li>Item content</li>
</ul>

用一个词…恶心。用两个词…非常恶心。用三个词….OK,你明白。但这确实管用!
方法3:负边距

跟方法2很相似,抱歉。你可以利用inline-block的灵活性,给它们设置一个负边距,隐藏空白:
.inline-block-list li {
margin-left: -4px;
}

这种方法最不推荐,因为你必须考虑到各种情况,有时候会出现一些无法预料的空白。最好不用这招。
方法4:首尾接龙

另外一个利用HTML标记的方法是将元素的闭合标记和下一个元素的开始标记靠在一起:
<ul>
<li>Item content</li
><li>Item content</li
><li>Item content</li>
</ul>

并不像HTML注释那样丑陋,但我宁愿手工删除那些空白,而不考虑代码的可读性。

没有一个方法是非常理想的,但在网页中不留空白也是一个烂方法。
这并不是在警告你不要使用inline-block,inline-block仍然是非常的有用,只是在使用你要明白如何处理里面出现的空白。

5种方法去掉HTML中Inline-Block元素之间的空白的更多相关文章

  1. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  2. 三种java 去掉字符串中的重复字符函数

    三种java 去掉字符串中的重复字符函数 public static void main(string[] args) { system.out.println(removerepeatedchar( ...

  3. Knockout获取数组元素索引的2种方法,在MVC中实现

    原文:Knockout获取数组元素索引的2种方法,在MVC中实现 在遍历数组.集合的时候,通常要获取元素的索引,本篇体验使用Knockout获取索引的2种方法. 假设有这样的一个模型: namespa ...

  4. 清除行内元素之间HTML空白的几种解决方案

    行内块(inline-block)是非常有用的,特别是想要不用'block'和'float'来控制这些行内元素的margin,padding之时. 问题来了,HTML源码中行内元素之间的空白有时候显示 ...

  5. PHP连接sqlserver的两种方法,向sqlserver2000中写入数据,中文乱码

    项目环境是php5.3.28 项目用的ThinkPHP3.2.3  已经mysql5.5数据库,要和另一个项目对接,需要连接sqlsever2000数据库进行一些操作. 第一种用php自带扩展连接数据 ...

  6. Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID

    query取得iframe中元素的几种方法 在iframe子页面获取父页面元素代码如下: $('#objId', parent.document);// 搞定... 在父页面 获取iframe子页面的 ...

  7. 【java基础 13】两种方法判断hashmap中是否形成环形链表

    导读:额,我介绍的这两种方法,有点蠢啊,小打小闹的那种,后来我查了查资料,别人都起了好高大上的名字,不过,本篇博客,我还是用何下下的风格来写.两种方法,一种是丢手绢法,另外一种,是迷路法. 这两种方法 ...

  8. 5种方法获取url中文件的扩展名

    /** * strrchr - 查找指定字符在字符串中的最后一次出现 * strrpos — 计算指定字符串在目标字符串中最后一次出现的位置 * end — 将数组的内部指针指向最后一个单元 * pa ...

  9. 去除行内(inline/inline-block)元素之间的间距

    先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...

随机推荐

  1. JavaScript最全的10种跨域共享的方法

    在客户端编程语言中,如javascript和ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义.同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和 ...

  2. poj 3348 Cows 求凸包面积

    题目链接 大意: 求凸包的面积. #include <iostream> #include <vector> #include <cstdio> #include ...

  3. pyVmomi入门

    简要说明 pyVmomi is the Python SDK for the VMware vSphere API that allows you to manage ESX, ESXi, and v ...

  4. The c programming language第一章节所有程序的实现

    //打印第一个程序hello, word #include<stdio.h> int main() { printf("hello, world\n"); ; } // ...

  5. asp.net 多站点共享StateServer Session

    <sessionState mode="StateServer" stateConnectionString="tcpip=127.0.0.1:42424" ...

  6. npm使用教程(未完)

    npm docs 设置镜像站 因为npmjs的官方网站,总会下载比较慢或打不开,所以通常需要设置一下镜像站来更好的安装npm库 npm install --registry http://regist ...

  7. 使用 PyQt 转换网页到 PDF(使用QtWebKit加载完毕后,打印整个窗口就行了,真简单!)

    import sys try: from PyQt4 import QtWebKit from PyQt4.QtCore import QUrl from PyQt4.QtGui import QAp ...

  8. Android 优化性能之 如何避免--过度绘制

    可能有些人不明白什么是过度绘制,简单言,我们app一个页面所显示的效果是由像素一帧一帧绘制而成.过度绘制就是意味着这一帧被绘制多次.如果是静态的布局,可能影响不是很大,如果是动态的,比如ListVie ...

  9. cpan安装及其使用

    cpan安装及其使用 Perl是一种相当灵活的程序编程语言,现有的许有程序都是使用它进行编程的.它的优点之一就是无需自己编写编码,你就能利用许多增加的模块,创建新的功能. 程序利用这些模块的编码,而程 ...

  10. /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.15' not found,解压rpm包

    如果是64位系统报错信息如下: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.15' not found (required by 原因是没有GLIB ...