在我们会用display的时候,inline-block肯定不陌生吧,我今天在做项目的时候,用了inline-block,使a标签可以自定义宽度,但是随之而来的问题就是换行的BUG,如下图

特地加了一个border来看其间距,果不其然,会产生一定的间隙

解决方法1:浮动

没有什么是浮动解决不了的,如果有的话,那就用两次,在每个a标签上加个float:left,完美解决

解决方法2:父级元素font-size:0

这个方法比较偏一点,也是今天从我们老大那里刚刚得知的,css果然许多学问,

html{
  -webkit-text-size-adjust:none;/* 使用webkit的私有属性,让字体大小不受设备终端的调整,可定义字体大小小于12px */
}
父级元素{
font-size:0;/* 所有浏览器 */
*word-spacing:-1px;/* 使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙,减少单词间的空白(即字间隔) */
}
子元素{
font-size: 12px;
letter-spacing: normal;/* 设置字母、字间距为0 */
word-spacing: normal; /* 设置单词、字段间距为0 */
}

  完美解决!

将display设置为inline-block之后产生间隙然后换行问题的解决方法的更多相关文章

  1. 改进动态设置query cache导致额外锁开销的问题分析及解决方法-mysql 5.5 以上版本

    改进动态设置query cache导致额外锁开销的问题分析及解决方法 关键字:dynamic switch for query cache,  lock overhead for query cach ...

  2. div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法(借鉴)

    原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度, ...

  3. 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法

    内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...

  4. SVN设置忽略文件列表以及丢失了预定增加的文件解决方法

    设置svn忽略列表 Linux下svn命令行配置 1. 修改版本库的相关属性 2. svn 客户端的配置 Windows下 Tortoise SVN 设置 1. Tortoise SVN 上修改版本库 ...

  5. HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法(高度欺骗)

    元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...

  6. mount: block device /dev/cdrom is write-protected, mounting read-only 解决方法

    [root@localhost ~]# mount /dev/cdrom /mnt/cdrom/ mount: block device /dev/sr0 is write-protected, mo ...

  7. WPF中设置了WindowStyle="None"后,窗口仍然有边框的解决方法

    1. 设置了窗体的WindowStyle="None",窗口还是右边框,如下图: 2. 这是因为窗体默认是可以改变大小的,所以需要修改ResizeMode的值 ResizeMode ...

  8. “matplotlib display text must have all code points < 128 or use Unicode strings”解决方法

    import sys reload(sys) sys.setdefaultencoding('utf-8') 插入以上代码,便可解决.

  9. 针对标签中设置 disabled="true",$("#id").serialize()获取不到value的解决方法

    今天给<select>增加disabled="true", 发现$("#form").serialize()的结果不包含select标签的值,解决办 ...

随机推荐

  1. 如何用Visual Studio 2013 (vs2013)编写C语言程序

    如何用Visual Studio 2013 (vs2013)编写C语言程序 (2014-05-16 10:58:15)   Visual Studio 2013是一个很强大的软件,但是刚开始用Visu ...

  2. Windows C++ 非递归式(stack)深度优先遍历目录

    #include <Windows.h> #include <cstdio> #include <cstring> #include <string> ...

  3. [uart]2.tty和uart的函数调用流程

    以下是在include/uapi/linux/tty.h中定义了现有的线规号,如果需要定义新的,则需要在后面添加新的 /* line disciplines */ #define N_TTY 0 #d ...

  4. [uart]stty命令使用

    中文解释链接:http://linux.51yip.com/search/stty 英文解释链接:http://pubs.opengroup.org/onlinepubs/9699919799/uti ...

  5. Java上的jQuery?解析HTML利器—Jsoup

    也许大家有过在java运行平台上解析html的经历,通常的方式是将HTML以XML的形式进行结点解析,调用java本身的xml解析类库.这样的方式很容易理解并且很方便,但习惯用jQuery的各位是否在 ...

  6. [转]Handler学习笔记(一)

    一.Handler的定义: Handler主要接收子线程发送的数据, 并用此数据配合主线程更新UI,用来跟UI主线程交互用.比如可以用handler发送一个message,然后在handler的线程中 ...

  7. bootstrap-slider插件使用方法

    bootstrap-slider例子地址:https://seiyria.com/bootstrap-slider/ bootstrap-slider github地址:https://github. ...

  8. dvi 中的内容居中

    text-align:right;  文本居中 line-height:35px;*垂直居中*

  9. Vector & ArrayList Hashtable & HashMap ArrayList & LinkedList

    1. Vector & ArrayList 1)  Vector的方法都是同步的(Synchronized),是线程安全的(thread-safe),而ArrayList的方法不是,由于线程的 ...

  10. 【转】DWM 窗体玻璃效果实现

    我一直盼望着 Windows 新版本的发布.令人感兴趣的事情莫过于浏览 MSDN® 和 SDK 文档,查找一些可以利用和依赖的最新创新,然后让朋友和同事以及您的老板(如果幸运的话)大开眼界.Windo ...