极客观点
项目管理
HarmonyOS
本人要做一个检测html元素是否被完整渲染到屏幕上的插件，于是创建了一个deemo准备写代码，可是出现了一个很诡异的缝隙，我看不懂它是怎么来的，于是来问一下。
就是那条白线
html如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"/>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<div class="above"></div>
<div class="middle">
<div class="left"></div><div id="item"></div><div class="right"></div>
</div>
<div class="below"></div>
</body>
<script src="http://test.yyfai.club/repository/jquery.js"></script>
<script src="js.js"></script>
</html>css如下
*{
margin:0;
}
.above{
background-color:red;
width:1500px;
height:600px;
}
.below{
background-color:blue;
width:1500px;
height:600px;
}
.left{
background-color:#5e5e5e;
display:inline-block;
width:600px;
height:200px;
}
#item{
background-color:purple;
display:inline-block;
width:300px;
height:200px;
}
.right{
background-color:#000;
display:inline-block;
width:600px;
height:200px;
}
.middle{
white-space:nowrap;
}那个引用的js如下
$(function(){
//main
});
html5
如果内联元素在代码中之间存在换行,那么页面上的内联元素之间会有空隙存在.
如何取消掉这种不受控制的空隙呢.
1.去掉内联元素之间的换行(代码里)
2.首先把父级标签的字体设置为0, 然后设置内联元素的字体大小, 即可完成取消