行内元素之间出现间隙的bug解决

  在平时写代码的时候,不免会遇到写多个行内元素【如:a,span等】的时候,元素间会产生间隙的bug问题。

  产生的原因:一般都是在Html中有换行符、tab(制表符)、空格等造成空隙的产生。

  解决的办法我总结了两个,如下。

  方法一:将元素写成一行,中间不换行;

  将本来这样罗列清晰的代码

 1 <div class="pageNormal">
 2     <span class="pagePre">&lt;</span>
 3     <span class="currentPage">1</span>
 4     <a href="#">2</a>
 5     <a href="#">3</a>
 6     <a href="#">4</a>
 7     ...
 8     <a href="#">28</a>
 9     <a href="#">29</a>
10     <a href="#">30</a>
11     <a href="#">&gt;</a>
12 </div>

折合成下面这样

1 <div class="pageNormal">
2     <span class="pagePre">&lt;</span><span class="currentPage">1</span><a href="#">2</a><a href="#">3</a><a href="#">4</a>...<a href="#">29</a><a href="#">30</a><a href="#">&gt;</a>
3 </div>

虽然轻松解决了问题,但是代码看上去杂乱无章,不便于后期的改善维护,所以不推荐。

方法二:设置font-size:0;

1 .pageNormal{font-size:0;}
2 .pageNormal a,.currentPage,.pagePre{font-size:14px;}

注:主容器设置font-size:0,那么内联标签的内容都显示不出来了,此时只需将内联标签的元素设置一下大小即可。

当然,除了上述方法,还有让内联元素浮动【我试的是float:left;】的办法,此时父级容器需要设置宽高,才好定位内联元素的位置。感兴趣的朋友可以一试。

转载于:https://www.cnblogs.com/love-family/p/4432144.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值