在我们会用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. ORM框架为什么不流行了

    程序员的逻辑是先写sql脚本,然后在编写对应的实体代码. orm框架的逻辑是先写实体代码,然后自动生成脚本,构建数据库,这和程序员的逻辑或习惯刚好相反,所以这类ORM框架渐渐的被淘汰了,例如:Hibe ...

  2. css3实现的鼠标经过按钮特效

    今天要为各网友再带来一款css实现的鼠标经过按钮的特效.按钮初始时,边框为断开的按钮,当鼠标经过按钮时动画变为封闭的边框.效果图如下: 在线预览   源码下载 我们一起看下实现的代码: html代码: ...

  3. [ubuntu]E: The package firmware-upgrade needs to be reinstalled, but I can't find an archive for it.

    解决办法把firmware-upgrade卸载 sudo dpkg --remove --force-all firmware-upgrade 然后 sudo apt-get update 即可

  4. IOS中摇一摇实现截屏(可实现问题反馈的功能)

    有一段时间没有更新博客了,今天更新一篇关于最近工作中用到的一个功能,先简单描述一下:我们知道,测试人员在测试客户端产品时,当出现问题或者BUG的时候,都得先对页面截图,然后从相册中选择截图,加上一段描 ...

  5. windows server 2008 域控安装

    windows server 2008 域控安装:1.dns安装,安装过程会提示.net frame 3.51安装 3.域控安装 原文:地址 http://wenku.baidu.com/link?u ...

  6. html2canvas如何在元素隐藏的情况下生成截图

    html2canvas官网地址:http://html2canvas.hertzen.com/ github地址:https://github.com/niklasvh/html2canvas/ 从官 ...

  7. ajax回调函数中使用$(this)取不到对象的解决方法

    如果在ajax的回调函数内使用$(this)的话,实践证明,是取不到任何对象的,需要的朋友可以参考下 $(".derek").each(function(){ $(this).cl ...

  8. ubuntu环境JDK安装(转至 http://hi.baidu.com/leo_lovato/item/31d1150d31a06d8002ce1bec)

    ubuntu安装jdk 1.首先去官网http://www.oracle.com/technetwork/java/javase/downloads/index.html 下载最新版的jdk.我下载了 ...

  9. 转载: erlang连接mysql

    转自:http://blog.csdn.net/flyinmind/article/details/7740540 项目中用到erlang,同时也用到mysql.惯例,google. 但是,按照网上说 ...

  10. 基于bootstrap的Dialog

    function yms_Dialog(container_id, modal_path, handle_function) {     /// <summary>    ///      ...