??在開發(fā)中我們總是會遇到一些奇怪的事情，由于開發(fā)者自身的理解或者說是知識面的盲區(qū)页慷。
??廢話不多說炭晒，直接上代碼：
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;
}
按照我們的預(yù)計是不是應(yīng)該長這樣？
預(yù)計
然而其實它長這樣:
原樣
所以這是為啥轩缤，開始我是蒙蔽的。其實是這樣的仇让，當(dāng)inline-block元素在水平位置的時候，默認(rèn)是會有間距的躺翻。解決這個問題有這樣幾個方法丧叽。
方法一
你可以把代碼間的空隔去除，但是這樣代碼就會連在一起公你，本人不推薦這樣做
方法二
#######你可以通過對父元素設(shè)置font-size:0來解決這個問題踊淳。
.parents{
margin: 0px auto;
width:900px;
overflow: hidden;
font-size: 0;
}
當(dāng)然你也要在子元素上設(shè)置字體大小
.child{
width:300px;
display: inline-block !important;
font-size: 12px;
}
