将display设置为inline-block之后产生间隙然后换行问题的解决方法
在我们会用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之后产生间隙然后换行问题的解决方法的更多相关文章
- 改进动态设置query cache导致额外锁开销的问题分析及解决方法-mysql 5.5 以上版本
改进动态设置query cache导致额外锁开销的问题分析及解决方法 关键字:dynamic switch for query cache, lock overhead for query cach ...
- div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法(借鉴)
原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度, ...
- 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法
内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...
- SVN设置忽略文件列表以及丢失了预定增加的文件解决方法
设置svn忽略列表 Linux下svn命令行配置 1. 修改版本库的相关属性 2. svn 客户端的配置 Windows下 Tortoise SVN 设置 1. Tortoise SVN 上修改版本库 ...
- HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法(高度欺骗)
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
- 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 ...
- WPF中设置了WindowStyle="None"后,窗口仍然有边框的解决方法
1. 设置了窗体的WindowStyle="None",窗口还是右边框,如下图: 2. 这是因为窗体默认是可以改变大小的,所以需要修改ResizeMode的值 ResizeMode ...
- “matplotlib display text must have all code points < 128 or use Unicode strings”解决方法
import sys reload(sys) sys.setdefaultencoding('utf-8') 插入以上代码,便可解决.
- 针对标签中设置 disabled="true",$("#id").serialize()获取不到value的解决方法
今天给<select>增加disabled="true", 发现$("#form").serialize()的结果不包含select标签的值,解决办 ...
随机推荐
- 分享一款基于jquery的圆形动画按钮
之前为大家介绍过一款纯css3实现的圆形旋转分享按钮.今天要给大家带来一款基于jquery的圆形动画按钮.这款按钮鼠标经过的时候以边框转圈,然后逐渐消息,在实例中给出了四种颜色的demo.效果图如下: ...
- 【C#】BackgroundWorker类传递参数
要传递多个不同类型的参数: private void Test(){ int a = 123; string b = "456"; bool c = true; Backgroun ...
- spring4.1.6配置quartz2.2.1(maven) <转>
Spring3.0不支持Quartz2.0,因为org.quartz.CronTrigger在2.0从class变成了一个interface造成IncompatibleClassChangeError ...
- 4G模块ME3760_V2的拨号过程
AT AT+CFUN=1 模块功能全打开,上电可以设置默认状态 AT+ZSET="LET_INFO" 掉电后可以保存AT+CFUN ...
- AM335x移植linux内核_转
AM335x移植linux内核 该博客中详细介绍了移植linux内核到AM335x上相关,设备驱动采用设备树(DT)方式加载,包含设备启动.uboot.kernel.driver.rootfs及简单上 ...
- CentOS 6编译安装yum和配置常用的yum源
安装环境:VPS,CentOS 6 + devel包 一.安装相应的软件 1.安装python 下载Python源码包 [root@akinlau ~]# wget http://www.python ...
- linux取随机数shell版本
#!/bin/bash aa=$(-) ..} do useradd $i echo $aa|passwd --stdin $i echo "${i} ${aa}" >> ...
- history统计命令最多的20条
1.1.1 统计使用命令最多的20条 [root@ob1 ~]# history|awk '{ml[$2]++}END{for (i in ml) print i,ml[i]}'|sort -nrk ...
- Hibernate-HQL&QBC基础使用(分页)
@Test public void testHql() { Configuration configuration = new Configuration().configure(); Session ...
- 用CSS创建打印页面
用CSS创建打印页面,不必为打印而专门建立一个HTML文件,可以节省一些体力,其前提是按“WEB标准”用CSS+DIV布局HTML页面. 第一.在HTML页面加入为打印机设置的CSS文件 <li ...