在开发中我们总是会遇到一些奇怪的事情，由于开发者自身的理解或者说是知识面的盲区。
废话不多说，直接上代码：
html部分
<!DOCTYPE html>
<html>
<head>
<title>测试的页面</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<ul class="parents blue" >
<li class="child red" >子块一</li>
<li class="child green" >子块二</li>
<li class="child yellow" >子块三</li>
</ul>
</body>
</html>
CSS部分
*{
margin: 0px;
border:0px;
padding: 0px;
}
.parents{
margin: 0px auto;
width:900px;
overflow: hidden;
}
.parents:after{
clear:both;
}
.child{
width:300px;
display: inline-block !important;
}
.blue{
background-color: blue;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
.yellow{
background-color: yellow;
}
li{
list-style: none;
}
按照我们的预计是不是应该长这样？
预计
然而其实它长这样:
原样
所以这是为啥，开始我是蒙蔽的。其实是这样的，当inline-block元素在水平位置的时候，默认是会有间距的。解决这个问题有这样几个方法。
方法一
你可以把代码间的空隔去除，但是这样代码就会连在一起，本人不推荐这样做
方法二
#######你可以通过对父元素设置font-size:0来解决这个问题。
.parents{
margin: 0px auto;
width:900px;
overflow: hidden;
font-size: 0;
}
当然你也要在子元素上设置字体大小
.child{
width:300px;
display: inline-block !important;
font-size: 12px;
}
网友评论