摘要：最近在寫網站樣式的時候，設置了子元素的寬度，目的讓其并排展示一行，之前的都是用float寫，沒有遇到問題，今天使用了inline-block，卻換行了，打開調試模式...
最近在寫網站樣式的時候，設置了子元素的寬度，目的讓其并排展示一行，之前的都是用float寫，沒有遇到問題，今天使用了inline-block，卻換行了，打開調試模式，查看padding和margin均為0，也就是說，問題并不是出現在換行元素本身上邊，這就很奇怪了，代碼也很簡單：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;box-sizing:border-box}
.nav{
width: 100%;
}
.nav li{
width: 20%;
display: inline-block;
}
</style>
</head>
<body>
<ul>
<li>
<a href="https://www.yzmcms.com/">首頁</a>
</li>
<li>
<a href="https://www.yzmcms.com/xiazai/">下載</a>
</li>
<li>
<a href="https://www.yzmcms.com/dongtai/">動態</a>
</li>
<li>
<a href="https://www.yzmcms.com/anli/">案例</a>
</li>
<li>
<a href="https://www.yzmcms.com/lianxi/">聯系</a>
</li>
</ul>
</body>
</html>查詢了相關資料，終于找到了原因：
inline-block元素之間，寫代碼時的換行，是一個空格，所以雖然肉眼看不到，但是實際上是有空格字符串占了位置，所以會導致 inline-block 產生不可見的間距，就出現了無法理解的換行，而 float 屬性脫離標準文檔流 ，所以不會產生換行的效果。
解決方案：
1.不設置display:inline-block，而是用我們熟悉的float來實現。
2.設置父元素的屬性：white-space: nowrap，強制不換行（不推薦使用）
3.inline-block元素之間，寫代碼時的不換行，但HTML代碼的可讀性很不好（不推薦使用）
4.父元素：font-size: 0，inline-block元素重新設置 font-size 即可（完美解決）
網友評論：
大哥，你把nav類加到ul中不也能解決嗎
2022-10-09 06:34:22 回復