css处理display:inline

日期:2021-03-18 类型:科技新闻 

关键词:抠图软件电脑版,在线图片加水印,在线 抠图,在线画图网站,淘宝做图片用什么软件好

今日在做H5的水光滑动卡片时用到了display:inline-block;却发现处在同1水平网上的元素之间竟然造成了间隙,这很明显并不是我要想的实际效果,因此我就换为了左波动,这样间隙的难题是处理了,可是必须设定父元素的宽度才可以完成水平上下翻转,这样又提升了编码量,由于卡片的个数不固定不动,必须即时设定其父元素的宽度,就要用到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>
<div class="box">
    <span>111</span>
    <span>111</span>
    <span>111</span>
    <span>111</span>
</div>
</body>
</html>

实际效果以下:

这个间隙很显著存在,听说这类主要表现是合乎标准的应当有的主要表现,是换行导致的空白符致使的。但这实际效果很明显并不是大家要想的,大家要想的间隙是大家依据自身的具体要求而设定的边距。那末该怎样清除造成的这个间隙呢?方法有3:

 方式1:元素之间不换行,编码以下:

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

实际效果以下:

方式2:给其父元素设定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:

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

实际效果以下:

方式3:负margin方式,必须留意的是这个空隙跟字号尺寸相关系的,因此空隙并不是个明确值。

以上3种方式,前两种是较为好的处理方法,第3种方式不强烈推荐应用。在网上也有别的的处理方法,但我觉得還是前两种较为好。

PS:

融合众多前端开发高手的评价提议看来,还可以给其父元素设定display:flex来清除间隙,且编码量少了,可是用在我的水光滑动卡片的实际效果中致使全部的元素都处在了可视性对话框中,就不可以完成水平上下拖动了。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。