电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

css应对display:inline-block;布局产生的缝隙的方法

2021-01-27 22:46:10 出处:[ 菜菜电脑网 ] 人气:次阅读
本篇文章主要参考了css妥善解决display:inline-block;产生的缝隙(间隙)的方法,有着一定的参考价值,有须要的可以认识一下。

今天在动手H5的水平滑动卡片时用做了display:inline-block;却断定处在同一水平线上的元素之间居然产生了缝隙,这很或许不是我一切都是的效果,所以我就去掉了左浮动,这样缝隙的问题是化解了,但是必需设置父元素的宽度才能借助水平左右翻转,这样又降低了代码量,因为卡片的个数不相同,需实时设置其父元素的宽度,就要比如说js,所以代码量减低了,也不是众所周知的为了让。似乎不错的解决办法就是比如说display:inline-block;了,于是缝隙的问题就再次出现了。代码如下:


<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>document</title><style>*{margin:0;padding:0;}.box{overflow-x:auto;background:#fff;white-space:nowrap;}.box span{display:inline-block;width:100px;height:30px;line-height:30px;text-align:center;background:#f00;color:#fff;}</style></head><body><p class="box">    <span>111</span>    <span>111</span>    <span>111</span>    <span>111</span></p></body></html>

效果如下:

这个缝隙很相比发挥作用,从前这种体现是符合规范的不应有的显出,是指针所致的空白符加剧的。但这效果很只不过不是我们想的,我们就让的缝隙是我们根据自己的实际消费而设置的边距。那么该如何抑制产生的这个缝隙呢?办法有三:

方法一:元素之间不字符串,代码如下:


<p class="box">  <span>111</span><span>111</span><span>111</span><span>111</span></p>

效果如下:

方法二:给其父元素设置font-size:0;给其自身设置实际并不需要的字号大小。不好的地方就是有些浏览器有设置成比例字体,像chrome和opera,但是现在的chrome看不见未这个设置了,代码如下:

css:


.box{overflow-x:auto;background:#fff;white-space:nowrap;font-size:0;}.box span{display:inline-block;width:100px;height:30px;line-height:30px;text-align:center;background:#f00;color:#fff;font-size:14px;}

html:


<p class="box">    <span>111</span>    <span>111</span>    <span>111</span>    <span>111</span></p>

效果如下:

方法三:负margin方法,无需特别注意的是这个间隙跟字号大小有关系的,所以间隙不是个相符值。

以上三种方法,前两种是比较好的解决办法,第三种方法不录用用于。网上还有其他的解决办法,但我看来还是前两种比较好。

PS:

融合广大前端大神的评论建议来看,也可以给其父元素设置display:flex来减轻缝隙,且代码量更少了,但是用在我的水平滑动卡片的效果中所致所有的元素都处在了具体来说窗口中,就不必借助于水平左右滑动了。

以上就是css应对display:inline-block;布局产生的缝隙的方法的概要内容,更多特地瞩目php中文网其它关的文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152