inline-block间距解决方案
当我们将元素设为inline-block时，总是会莫名其妙出现一些间距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul {
padding-left: 0;
}
ul li {
width: 20px;
height: 20px;
background: red;
display: inline-block;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
效果如下:
原因在于空白符的存在！</li>与下一行的<li>之间存在空白换行符
解决方法一般是在不破坏dom结构的前提下改变写法以清除换行符
1.结束标签与开始标签拼接
<ul>
<li> </li><li> </li><li> </li><li> </li>
</ul>
2.拆分开始标签
<ul>
<li>
</li><li
></li><li
></li><li
></li>
</ul>
3.拆分结束标签
<ul>
<li></li
><li></li
><li></li
><li></li>
</ul>
4.将换行符注释掉
<ul>
<li></li><!--
--><li></li><!--
--><li></li><!--
--><li></li>
</ul>
5.使用margin负值
即将margin-left设为负值，让其向左偏移，但偏移距离与浏览器、上下文字体及字体大小有关，一说为-0.25em，亲测并不适用，故此方法适用性不佳
6.清除闭合标签（看起来怪怪的。。）
<ul>
<li>
<li>
<li>
<li>
</ul>
注意: 父元素的闭合标签不可省去，否则在低版本浏览器(主要指IE)上会有问题
7.父元素font-size设为0
原理很简单，父元素font-size设为0后空白字符字体大小也为0，自然看不出来，但是在有些浏览器上，最小字体有限制，主要指的是chrome，
这时，可加上-webkit-text-size-adjust: none （-webkit-text-size-adjust 是否根据设备大小调整字体，仅仅在移动设备上有效），但最新的chrome已解决此问题
8.letter-spacing设为负值
将leter-spacing设为负值可减少设置消除间距，不同浏览器数值不一样，一般不会发生叠加，但opera上会有过小还原的现象。
9.word-spacing设为负值
类似于letter-spacing的效果，但过小时会发生叠加，私认为此方法也不算可取。
因此现阶段最好的方法为: 改变dom结构、清除闭合标签及font-size设为0
inline-block间距解决方案的更多相关文章
- inline元素和inline-block元素的4px空白间距解决方案
实在不想写了,要吐了,看到一篇讲的比较全的文章,直接粘链接了 inline元素和inline-block元素的4px空白间距解决方案 出自脚本之家
- inline-block元素的4px空白间距解决方案
http://www.jb51.net/css/68785.html inline-block元素的4px空白间距解决方案
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
- IE6双倍margin间距解决方案
问题:在IE6下如果某个标签使用了float属性,同时设置了其外补丁“margin:10px 0 0 10px”可以看出,上边距和左边距同样为10px,但第一个对象距左边有20px. 解决 ...
- inline, block, and inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- inline,block,inline-block解析
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
随机推荐
- 运行./cpp.sh，显示command not found
首先运行ls -l 查看这个文件的属性是否可执行drwxrwxrwx对当前用户必须具有可执行权限(即含有x符号)如果没有可以运行chmod 777 cpp.sh 添加可执行权限
- java中poi解析excel（兼容07版本以上及以下：.xls和.xlsx格式）
package com.genersoft.cbms.ysbz.ExcelDr.cmd; import com.genersoft.cbms.ysbz.ExcelDr.dao.ExcelDrDao; ...
- UIView的endEditing:方法
当视图收到endEditing:消息时,如果视图(或者其下的人和子视图)是当前的第一响应对象,就会取消自己的第一响应对象状态, 而且虚拟键盘也会消失(传入的参数代表是否需要强制取消第一响应对象状态.有 ...
- 我们常用的在a标签中有点击事件
我们常用的在a标签中有点击事件:1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题 ...
- POJ 1731 Orders(STL运用）
题目地址:POJ 1731 这题能够直接用STL函数做,非常轻松..next_permutation函数非常给力.. 代码例如以下: #include <algorithm> #inclu ...
- NHibernate二级缓存(第十一篇)
NHibernate二级缓存(第十一篇) 一.NHibernate二级缓存简介 NHibernate由ISessionFactory创建,可以被所有的ISession共享. 注意NHibernate查 ...
- iOS左滑手势失效
iOS7之后,苹果优化了一个小功能,就是对于UINavagationController堆栈里的UIViewController,只要轻轻在视图控制器的左边缘右滑一下,该视图控制器就会pop出栈(前提 ...
- oracle 累加功能，累加百分比
最近做数据分析,需要用到累加功能,发现强大的oracle还真有,用over(order by field) 例子: 数据表中最后一列就是累加的效果 累加sql: select t.acc_pedal_ ...
- Android中关于JNI 的学习（四）简单的样例，温故而知新
在第零篇文章简单地介绍了JNI编程的模式之后.后面两三篇文章,我们又针对JNI中的一些概念做了一些简单的介绍,也不知道我究竟说的清楚没有.但相信非常多童鞋跟我一样.在刚開始学习一个东西的时候,入门最好 ...
- laravel学习之路1：认证相关
Laravel中Auth::guard()表示什么意思? Auth::check() 是判断用户是否登录的方法,如果使用的默认用户系统,那这样使用没问题. 但是使用两组用户的话,如何使用各组用户的功能 ...