影响布局的inline-block的空白符的问题
昨天切页面时，进行布局时，想改变以下方法换换口味，所以就抛弃了float方法，采用了display:inline-block方法，没想到却随之而来的带来了一个想不通的问题，那就是空白。废话不多说，上代码。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>inline-block的空白符</title>
<style type="text/css">
li{ width:50px; height:20px; background-color:#C90; display:inline-block;}
</style>
</head>
<body>
<ul class="box">
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
</body>
</html>
效果如上图所示，每个li之间都会有空格，这影响到我们对页面的布局。
一、造成的原因
inline-block水平呈现的元素之间，如果有换行或空格分隔，那么元素之间会有间距。
二、解决的方法
1、去除元素间的空白或者换行
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>inline-block的空白符</title>
<style type="text/css">
li{ width:50px; height:20px; background-color:#C90; display:inline-block;}
</style>
</head>
<body>
<ul class="box">
<li>li</li><li>li</li><li>li</li><li>li</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>inline-block的空白符</title>
<style type="text/css">
li{ width:50px; height:20px; background-color:#C90; display:inline-block;}
</style>
</head>
<body>
<ul class="box">
<li>
li</li><li>
li</li><li>
li</li><li>
li</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>inline-block的空白符</title>
<style type="text/css">
li{ width:50px; height:20px; background-color:#C90; display:inline-block;}
</style>
</head>
<body>
<ul class="box">
<li>li</li
><li>li</li
><li>li</li
><li>li</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>inline-block的空白符</title>
<style type="text/css">
li{ width:50px; height:20px; background-color:#C90; display:inline-block;}
</style>
</head>
<body>
<ul class="box">
<li>li</li><!--
--><li>li</li><!--
--><li>li</li><!--
--><li>li</li>
</ul>
</body>
</html>
2、利用margin负外边距
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>inline-block的空白符</title>
<style type="text/css">
li{ width:50px; height:20px; background-color:#C90; display:inline-block; margin-right:-8px;}//不过这个间距是根据字体的大小来调的，不具有普适性
</style>
</head>
<body>
<ul class="box">
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
</body>
</html>
3、因为空白字符也是字符，所以可以设置父元素的font-size：0，子元素重新定义font-size大小；但是这种方法在Safari中是无效的。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>inline-block的空白符</title>
<style type="text/css">
.box{ font-size:;}
li{ width:50px; height:20px; background-color:#C90; display:inline-block; font-size:12px;}
</style>
</head>
<body>
<ul class="box">
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
</body>
</html>
4、使用letter-spacing
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>inline-block的空白符</title>
<style type="text/css">
.box{ letter-spacing:-8px;}
li{ width:50px; height:20px; background-color:#C90; display:inline-block; letter-spacing:normal;}
</style>
</head>
<body>
<ul class="box">
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
</body>
</html> //Opera浏览器下问题：最小间距1像素，然后，letter-spacing再小就还原了
5、使用word-spacing
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>inline-block的空白符</title>
<style type="text/css">
.box{ word-spacing:-8px;}
li{ width:50px; height:20px; background-color:#C90; display:inline-block; word-spacing:normal;}
</style>
</head>
<body>
<ul class="box">
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
</body>
</html>
影响布局的inline-block的空白符的问题的更多相关文章
- inline, block, and inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- 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& ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
- 土旦：关于display:flex碰上white-space nowrap 影响布局的问题
背景,做一个前面图片宽度固定,后面宽度自适应,使用到了flex布局,但是想让后面div里文字不换行,超出以点点表示时,这时布局就乱了,查了下,原来flex布局与white-space:nowrap有影 ...
- div css 布局对seo 影响 布局原则
一.代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高蜘蛛爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处 ...
- overflow:hidden 影响布局的问题
a 与 b 都是 inline-block且高与父元素 c 相同均为 30px,而在a加上 overflow:hidden; 会使 a 的底线与整个父元素 c 的 text baseline 对齐,相 ...
随机推荐
- 网络基础知识HTTP(1) --转载
为什么要写网络? 作为网站开发人员,你所开发的软件产品最终是要在网络上运行的.这就像一个生产商,要生产供给东北地区的产品,而生产商对东北的天气.地理.人文毫无了解.生产商的产品肯定是不可用的,或者低端 ...
- AE分级渲染
分级渲染classbreakrenderer位于carto类库中,进行分级渲染时,首先要将相应图层按照某一Field分级.可使用esrisystem类库中的iclassifyGEN类的classify ...
- 一个Demo就懂的Angular之directive
<body> <div ng-controller="myCtrl"> <hello-word></hello-word> < ...
- 在IIS Express中调试时无法读取配置文件
在IIS Express中调试代码时,如果出现“无法读取配置文件”的问题(如图),这种情况是IIS Express的“applicationhost.config”配置文件中的映射关系出了问题[ps: ...
- .net 地址栏传中文乱码 的解决方法
1.设置web.config文件. <system.web> ...... <globalization requestEncoding="gb2312" res ...
- React-Native做一个文本输入框组件
我又回来啦! 由于最近一直在做公司的项目,而且比较急.如今项目已经迭代到第三期,可以缓一缓了... 说实话,最近一直再用android做开发,而且时间也不宽裕,react-native有点生疏了. 好 ...
- JAVA加密
[源地址http://www.iteye.com/topic/1122076/] 加密,是以某种特殊的算法改变原有的信息数据,使得未授权的用户即使获得了已加密的信息,但因不知解密的方法,仍然无法了解信 ...
- parentViewController
获取创建自己的上一级视图 self.parentViewController 并且强制转换
- ActiveMQ发布订阅模式（转）
ActiveMQ的另一种模式就SUB/HUB即发布订阅模式,是SUB/hub就是一拖N的USB分线器的意思.意思就是一个来源分到N个出口.还是上节的例子,当一个订单产生后,后台N个系统需要联动,但有一 ...
- UVA 11754 Code Feat （枚举，中国剩余定理）
转载请注明出处: http://www.cnblogs.com/fraud/ ——by fraud C Code Feat The government hackers at C ...