影响布局的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:0;}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>转载于:https://www.cnblogs.com/happyLee/p/5094932.html
影响布局的inline-block的空白符的问题相关推荐
- [CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
- flex布局右列固定左列自适应，遇到white-space nowrap 影响布局超长的问题
关于display:flex碰上white-space nowrap 影响布局的问题 缘由:想用flex实现,右边固定,左边文字自适应,并自动换行. 问题:文字撑满不换行 布局效果如下图: 代码如下: ...
- inline, block, inline-block区别
inline, block, inline-block区别 inline Not height and width; Not margin-top & margin-bottom; Alway ...
- 关于css的display:flex inline block inline-block和float
1.解释一下display的几个常用的属性值,inline , block, inline-block inline(行内元素):使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行, ...
- android弹出输入框不影响布局,android 输入法弹出后，不影响activity原有布局
android输入法弹出框有时会遮挡原有的布局,使得输入法弹出框弹出时,原布局消失,现介绍android:windowSoftInputMode的一些属性: 在AndroidManifest.xml文 ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- ie6 css padding,IE6padding的一个影响布局的问题在
ie6里的img设置background和padding,padding不正ie6里的img设置background和padding,padding不正常显示问题. ie6里面 现在ie6马上淘汰了 ...
- 土旦：关于display:flex碰上white-space nowrap 影响布局的问题
背景,做一个前面图片宽度固定,后面宽度自适应,使用到了flex布局,但是想让后面div里文字不换行,超出以点点表示时,这时布局就乱了,查了下,原来flex布局与white-space:nowrap有影 ...
- 安卓手机分辨率、尺寸、像素如何影响布局表现？
分辨率 大家在看手机参数的时候都会关注到分辨率这样一个参数(1080px*1920px),分辨率指的是横纵方向的像素点,影响着成像清晰度. 像素密度 像素密度指的是1英寸含有的像素点数量,那我们也知道 ...
最新文章
- 高可用 Prometheus 架构实践中的踩坑集锦
- 大话PHP设计模式：类自动载入、PSR-0规范、链式操作、11种面向对象设计模式实现和使用、OOP的基本原则和自动加载配置...
- 微信小程序遍历wx:for,wx:for-item,wx:key
- springboot项目不加端口号也可以访问项目的方法
- 我们需要打造有意识的人工智能吗？
- Hive的数据模型-分区表
- 0626 Django模型（ORM）
- 有关javabean的说法不正确的是_7、关于JavaBean，下列叙述中不正确的是
- PHP笔记（CSS篇）
- python包安装-centos7/windows
- 苹果官网查询产品的激活日期教程
- Unity实现隐藏鼠标功能
- 佛说，是我们自己苦了自己~
- 微信小程序返回上一页并刷新
- 4：Qt Ui遇到高分屏字体显示问题
- 小甲鱼python入门014课后题_小甲鱼零基础入门学习Python-014
- 正态分布的前世今生 (上)
- php通用图像处理库imagine使用
- Text-detector 一个用来检测文本内容行数和字数的Mini工具
- 怎么恢复win8的开始菜单