概述
display：inline-block的缝隙和错位问题
一、 缝隙问题
<style type="text/css">
*{
border: 0;
padding: 0;
margin: 0;
}
ul li{
display: inline-block;
border: 1px solid #000000;
}
</style>
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
</body>这每个li之间的间隙是符合W3C标准规范的表现，是元素书写的时候换行产生的空白符造成的问题。但不满足业务需求。完善这种的缝隙有如下几种方法：
一、书写的时候，省略空格
<body>
<ul>
<li>1111</li><li>2222</li><li>3333</li><li>4444</li><li>5555</li>
</ul>
</body>二、第一种方法，元素少的情况下还可以满足，但不符合实际业务开发。第二种方法就是设置父元素的font-size:0px，然后再设置各个子元素的font-size数值。
ul{
font-size: 0;
}
ul li{
display: inline-block;
border: 1px solid #000000;
font-size: 14px;
}
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
</body>排列错位问题
<style type="text/css">
.box{
border: 4px solid #000000;
width: 200px;
height: 200px;
display: inline-block;
}
.itemSmall_1{
background-color: chartreuse;
width: 40px;
height: 40px;
border: 2px solid #000000;
/* float: left; */
}
.itemSmall_2{
background-color: chartreuse;
width: 40px;
height: 40px;
border: 2px solid #000000;
float: left;
}
.itemBig1{
background-color: blue;
width: 150px;
height: 150px;
border: 2px solid #000000;
}
.itemBig2{
background-color: blue;
width: 150px;
height: 150px;
border: 2px solid #000000;
float: left;
}
</style>
<body>
<div class="box">
<div class="itemSmall_1">
</div>
<div class="itemBig1">
</div>
</div>
<div class="box">
<div class="itemSmall_2">
</div>
行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素
</div>
</body>原因，可能是快元素和行元素的baseline不一样导致上下不齐，所以解决的办法就是设置统一的vertical-align属性。基于同一个baseline值。
.box{
border: 4px solid #000000;
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
}
最后
以上就是彩色魔镜为你收集整理的CSS （三）display：inline-block的缝隙和错位问题的全部内容，希望文章能够帮你解决CSS （三）display：inline-block的缝隙和错位问题所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复