inline-block元素間距問題的幾種解決方案

　 　不知道大家有沒有碰到過設置了display:inline-block;的幾個相鄰元素之間有幾px間距的問題，這里提供幾種簡單實用的解決方法，希望能夠幫到大家！

 

　　 方法1. 將<li>標簽之間的空格與換行全部去掉，這也是我比較常用的一種方法

　　原html代碼：

<ul>
    <li>控球后衛</li>
    <li>得分后衛</li>
    <li>小前鋒</li>
    <li>大前鋒</li>
    <li>中鋒</li>
</ul>

　　css代碼：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: #bbb;
}
ul {
    list-style: none;
    width: 800px;
    height: 40px;
    background: #BF0D0D;
    font-size: 20px;
    color: #fff;
    line-height: 40px;
    margin: 50px;
}
ul li {
    display: inline-block;
    width: 160px;
    text-align: center;
    border-right: 1px solid #8E0303;
}
ul li:last-child {
    border-right: none;
}

　　運行效果：

　　我們發現li的寬度160px乘以5不就等於ul的寬度800px嗎，那為什么“中鋒”這個li還被擠下來了，難道是小球時代傳統中鋒被集體拋棄的原因嗎？哈哈當然不是，這其實是由於inline-block的特性導致，只要是存在空格或者換行的相鄰inline-block元素，顯示出來就會有幾個px的間距。那我們對html結構作以修改：

<ul>
    <li>控球后衛</li><li>得分后衛</li><li>小前鋒</li><li>大前鋒</li><li>中鋒</li>
</ul>

　　改成這樣之后我們發現中鋒又回去了：

　　但是將他們都放在一行的這種做法非常影響代碼的可讀性，我們可以將它改成這樣：

<ul>
    <li>控球后衛</li><!--
    --><li>得分后衛</li><!--
    --><li>小前鋒</li><!--
    --><li>大前鋒</li><!--
    --><li>中鋒</li>
</ul>

　　也就是在相鄰的元素之間加上空白的html注釋，變相地取消了他們之間的空白節點。還有其他的幾種改法這里不一一列舉，大家也可以自由發揮，只要是取消了相鄰元素之間的空白節點就能達到目的。

 

　　 方法2. 去掉結束標簽

　　如下：

<ul>
    <li>控球后衛
    <li>得分后衛
    <li>小前鋒
    <li>大前鋒
    <li>中鋒
</ul>

　　這樣也能得到理想中的結果，但如果要兼容低版本IE，最后一個列表項的結束標簽還是要加上的。

 

　　 方法3. 使用負邊距

　　改動代碼如下，其他代碼不變：

ul li {
    display: inline-block;
    width: 160px;
    text-align: center;
    border-right: 1px solid #8E0303;
    margin-right: -10px;
}
ul li:last-child {
    border-right: none;
    margin-right: 0;
}

　　這樣也能解決問題，其中，margin-right的大小並不是固定的，它和字體大小以及字體都有關系，大家可以查閱張鑫旭老師的一篇博客（ http://www.zhangxinxu.com/wordpress/2010/11/%e6%8b%9c%e6%8b%9c%e4%ba%86%e6%b5%ae%e5%8a%a8%e5%b8%83%e5%b1%80-%e5%9f%ba%e4%ba%8edisplayinline-block%e7%9a%84%e5%88%97%e8%a1%a8%e5%b8%83%e5%b1%80/）中第六部分的表格，也可以在自己的代碼中進行試驗，直到試出合適的值為止。

 　　這幾種方法基本上能夠解決實際開發當中的大部分問題，當然還有許多其它的解決方案，也歡迎大家留下更加神奇的方法！