处理inline元素之间换行产生的空白
来源:互联网 发布:如何优化英语教学 编辑:程序博客网 时间:2024/06/02 12:23
inline, inline-block元素之间的换行符会造成类似空格的空白。不知道你遇到过没?比如以下代码:
<a>1</a><a>2</a>
这种问题对布局影响不大,容易被忽略。但是某些极端情况就会把这个问题放大。例如以下代码:
<ul> <li>Item content</li> <li>Item content</li> <li>Item content</li></ul><style>li{ width:33.3%; display:inline-block; background:#abc; }</style>
这样一行的结构,精确的分配了行内元素的宽度,而换行产生的空白的影响被放大了。如何解决这种问题呢?
- 选用浮动的block代替inline-block, 因为曾经要处理IE6对inline-block的兼容性,养成了不适用inline-block的习惯,所以第一个想到这种方案。
- 编码时不使用换行,例如以下代码:
<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>
这种方法没有解决问题,而是规避了问题。这是最简单而不会带来任何影响的方法,但是之后其他人很容易排版你的代码从而导致问题,明显这种方法的可维护性太低。
3. 将父级font-size置0,行内元素再恢复字体大小。
这种方式是本人最喜欢的,不是因为它貌似”高大上”,而是因为它揭开了产生问题的原理。
4. 利用注释进行代码排版,例如以下代码:
<ul> <li>Item content</li><!----><li>Item content</li><!----><li>Item content</li></ul>
5.使用返回标签,类似上一种办法,代码如下:
<ul> <li>Item content</li ><li>Item content</li ><li>Item content</li></ul>
6.利用css 否定边距,例如以下代码:
.inline-block-list li { margin-left: -4px;}
这种方法是最差的,因为这很有可能为了解决问题而增加了新问题的风险,同时降低了强壮性和可维护性。
解决方案都经过了测试,建议采用第一种和第三种。
本文转载自http://www.jianshu.com/p/2b5cd6599a1d,可参考https://davidwalsh.name/remove-whitespace-inline-block
0 0
- 处理inline元素之间换行产生的空白
- 处理inline元素之间换行产生的空白
- 如何消灭inline元素换行产生的空白
- display:inline-block 元素之间由于换行所产生的间距问题
- Study《去掉HTML中Inline-Block元素之间的空白》
- 消除button或inline-block元素之间的空白间距
- display常用属性及inline元素之间的空白和padding的问题
- [知识点滴]巧妙去掉HTML中Inline-Block元素之间的空白的4种技巧
- 5种方法去掉HTML中Inline-Block元素之间的空白
- 移除 inline-block 元素之间的空白 (from-[众成翻译])
- inline-block元素的空白间距解决方法
- inline-block元素的空白间距解决方法
- 如何去除inline和inline-block元素的空白间距
- inline-block元素的4px空白间距解决方案
- 如何解决inline-block元素的空白间距
- font-size: 0;解决inline元素间的空白间隙
- inline-block元素间的换行符空格间隙问题
- span、a标签之间的换行空白问题
- int 单个字符转
- jdk源码之String
- linux3.4 和linux2.6的区别
- 一张表里,不同字段,值相同的两条记录,查询这两条记录中不同字段的语句
- 《Linux内核设计与实现》——内存管理
- 处理inline元素之间换行产生的空白
- 机器学习/深度学习测试题(一) —— 单层感知器的激活函数
- 【lambda】java8 lambda
- CGI实例--表单GET与POST示例
- 数字统计问题
- 1043. 输出PATest(20)
- maven 镜像
- 微信小程序一个坑的地方(uploadFile:fail Error: unable to verify the first certificate)
- Study Jams_ Android:gravity 和 Android:layout_gravity