移除行块级元素之间的空格(译文)
2017-11-20 10:13
232 查看
引言
我现在仍然记得作为一个IE6时代的初级开发者拼命的渴望IE拥有display: inline-block;这个属性。当我们想控制间距和填充在
inline元素儿不用
block and float的时候,
inline-block这个属性是及其的有用。
然而,使用
inline-block的时候有一个问题,视觉上两个元素之间会出现空白。
有很多办法移除这些恼人的空白
方法 0
唯一一个百分之百解决这个问题的方案是这样:不要在这些元素的源码之间出现空白。<style type="text/css"> ul,li{ margin: 0; padding: 0; } li{ list-style: none; display: inline-block; border: 1px solid black; padding: 2px; } </style> <ul><li>Item</li><li>Item</li><li>Item</li></ul>
下面是效果:
当然了,这个维护起来比较麻烦,但他很实用、和逻辑,最重要的是比较可靠。
方法 1
最好的空白解决方案:设置行区块元素的父元素font-size: 0。因此如果你有一个
元素包裹了一堆
元素,你可以这么做。
<style type="text/css"> ul,li{ margin: 0; padding: 0; } li{ list-style: none; display: inline-block; border: 1px solid black; padding: 2px; } .inline-block-list{ font-size: 0; } .inline-block-list li{ font-size: 14px; } </style> <ul class="inline-block-list"> <li>Item</li> <li>Item</li> <li>Item</li> </ul>
这种情况一般情况下和
方法 0是一样的结果,不过在IE8中,如果给行块级元素设置了
position:absolute,这个会导致一个严重的问题,页面直接就是全部空白了。
方法 2
这种方法有点取巧的意思,但仍然可以用。在行块元素之间使用HTML注释,这个原理也是在元素源码之间没有空格<style type="text/css"> ul,li{ margin: 0; padding: 0; } li{ list-style: none; display: inline-block; border: 1px solid black; padding: 2px; } .inline-block-list{ font-size: 0; } .inline-block-list li{ font-size: 14px; } .three{ position: absolute; margin-left: 20px; } </style> <ul class="inline-block-list"> <li>Item</li><!-- --><li>Item</li><!-- --><li class="three">Item</li> </ul>
用一个单词形容这个。。。流氓(gross),两个单词形容这种方法。。。真流氓(really gross)。用三个单词。。。就是——你可以使用它(you get it)。他可以正常的显示。
方法 3
和方法 2类似,这个方法也有点令人遗憾。你可以利用行块元素的灵活性,用负的间距抵消空白
<style type="text/css"> ul,li{ margin: 0; padding: 0; } li{ list-style: none; display: inline-block; border: 1px solid black; padding: 2px; } .inline-block-list li{ margin-left: -4px; } </style> <ul class="inline-block-list"> <li>Item</li> <li>Item</li> <li>Item</li> </ul>
这是一个很差劲的方案,你必须计算这个负间距是多少,有时候还会有不可预料的空白。所以,尽量避免使用这种来解决行块元素之间的空白。
方法 4
另外一个基于HTML的hack解决方案就是——只需要将闭合标签>放到下一个标签的开始:
<style type="text/css"> ul,li{ margin: 0; padding: 0; } li{ list-style: none; display: inline-block; border: 1px solid black; padding: 2px; } .inline-block-list{ font-size: 0; } .inline-block-list li{ font-size: 14px; } </style> <ul class="inline-block-list"> <li>Item</li ><li>Item</li ><li>Item</li> </ul>
跟HTML注释这种方式相比,没有那么难看,但我知道,我可以移除空白,但没有去考虑这些空白为什么会存在。
所有的这些解决方案没有一个是完美的,唯一可以选择的在HTML中不要使用空格和缩进也是一个不太好的方案。这不是告诉你“注意使用什么方案”,因为
inline-block仍然非常的有用,但当开发者使用它的时候知道如何处理空白非常的重要。
方法 my
我的方法是使用浮动,这个在IE7中也是ok的,前面的这些方法在IE系列中某些低版本可能会失效(inline-block不起作用)<style type="text/css"> ul,li{ margin: 0; padding: 0; } ul:after{ content: '.'; height: 0; visibility: hidden; display: block; clear: both; } li{ list-style: none; display: inline-block; border: 1px solid black; padding: 2px; float: left; } </style> <ul class="inline-block-list"> <li>Item</li> <li>Item</li> <li>Item</li> </ul>
LAST
原文地址:https://davidwalsh.name/remove-whitespace-inline-block
相关文章推荐
- 移除行块级元素之间的空格(译文)
- 如何解决inline-block元素之间空格
- html 元素class 多个class之间空格的含义
- HTML标签换行导多个inline-block元素不能在同一行,img之间会有空格
- IE浏览器<ul>列表中<li>元素之间存在空格的解决办法
- 2.13 带逗号的print语句输出的元素之间自动带个空格
- 移除 inline-block 元素之间的空白 (from-[众成翻译])
- C#在foreach中移除字典的元素
- 3、移除数组中的元素-JavaScript
- js提取整数部分,移除首末空格
- iframe页面和父页面之间元素查找的方法
- jquery 父、子页面之间页面元素的获取,方法的调用
- display常用属性及inline元素之间的空白和padding的问题
- 算法库应用——删除元素在[x, y]之间的元素
- 输入一行字符,统计其中有多少个单词,单词之间用空格分隔开
- JavaScript移除绑定在元素上的匿名事件处理函数
- Java正则表达式替换移除空行和多余的空格
- Vue关于子组件内表单元素与父组件之间的传值问题
- 【算法】组中元素全是1~n之间的整数问题
- 【LeetCode】27. Remove Element(移除元素)