影响布局的inline-block的空白符的问题
来源:互联网 发布:有关人工智能电影 编辑:程序博客网 时间:2024/05/01 13:48
<!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>
原文链接地址:http://www.cnblogs.com/happyLee/p/5094932.html
0 0
- 影响布局的inline-block的空白符的问题
- display:inline-block的空白间隙问题!
- 解决inline-block引起的空白间距问题
- 关于display: inline-block 默认空白间距的问题
- 解决inline-block引起的空白间距问题
- inline-block元素的空白间距解决方法
- inline-block元素的空白间距解决方法
- 如何去除inline和inline-block元素的空白间距
- inline-block布局列表项元素不在一行的问题
- inline-block基线对布局的影响&vertical-align&vertical-align等应用
- inline-block的间距问题
- 基于display:inline-block 的列表布局
- inline-block标签间出现空白的解决方案(4px 8px问题)
- display:inline-block空白间距的去除和兼容问题
- inline-block元素的4px空白间距解决方案
- 如何解决inline-block元素的空白间距
- Study《去掉HTML中Inline-Block元素之间的空白》
- 消除button或inline-block元素之间的空白间距
- php导出excel表格
- Android Studio更新升级方法
- Swift开发IOS-UIButton
- window.open打开新窗口,防止浏览器阻止弹窗解决办法
- 转:Linux下/etc/shadow文件全面详解
- 影响布局的inline-block的空白符的问题
- oracle中merge into的用法
- Android:PopWindow
- StreamCQL 1.1版本RoadMap
- VLIB中边缘检测算法学习
- 走出平面-3D 捕获与分享
- c#中的static
- JVM--性能分析
- nodejs+mongoose简单关联+增删改查