标签:换行 ons pre bsp 连接 html注释 导致 换行符 span
html:
<div class="consult-tab"> <a href="">咨询</a> <a href="">企业咨询</a> <a href="">咨询</a> <a href="">咨询</a> <a href="">咨询</a>
</div>
css:
.consult-tab { position: relative; font-size: 0; margin-top: 20px; border-bottom: 2px solid #1da838; } .consult-tab a { display: inline-block; font-size: 14px; border: 1px solid #1da838; border-right: 0; border-bottom: 0; }
虽然四个块状子元素排在了一行,但是子元素之间却留有空隙!
空隙产生原因:HTML中的换行符、空格符、制表符等空白符,字体大小不为0的情况下,空白符占据一定宽度,使用inline-block会产生元素间的空隙。
解决方法 :
1. 父元素的font-size设置为0,子元素的font-size设置为实际大小;
2. 子元素设置浮动;
3. 把所有的子元素写在一行;
4. 有时候子元素内容较长,所有子元素写在一行导致代码的可读性很差,这时候采用下面的写法(用HTML注释符把子元素连接起来)
标签:换行 ons pre bsp 连接 html注释 导致 换行符 span
原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/13126635.html