最近在學習如何製作導航條，並不太喜歡使用float這種方法，因爲帶來的副作用有點大。畢竟float出現的本意是爲了解決文字浮動的效果。所以我選擇使用inline-block來讓豎直的li列表變成水平狀。
所以，問題產生了。
<style type="text/css">
* { margin: 0; padding: 0; font-size: 14px; }
li{
background-color: blue;
display: inline-block;
margin: 0;
padding: 0;
}
</style>
<script>
</script>
</head>
<body>
<ul>
<li><a href="#">首 頁</a></li>
<li><a href="#">新聞快訊</a></li>
<li><a href="#">產品展示</a></li>
<li><a href="#">售後服務</a></li>
<li><a href="#">聯繫我們</a></li>
</ul>這樣簡單的一段代碼卻在li標籤之間產生了一小段很詭異的間隙。打開chrome的開發者平臺，並沒有發現哪個屬性對其產生了影響。正當困惑之際，我隨手改變了一下li的代碼書寫。
<style type="text/css">
* { margin: 0; padding: 0; font-size: 14px; }
li{
background-color: blue;
display: inline-block;
margin: 0;
padding: 0;
}
</style>
<script>
</script>
</head>
<body>
<ul>
<li><a href="#">首 頁</a></li><li><a href="#">新聞快訊</a></li>
<li><a href="#">產品展示</a></li>
<li><a href="#">售後服務</a></li>
<li><a href="#">聯繫我們</a></li>
</ul>奇蹟出現了…li之間的空隙居然消失了！直到此時才發現，原來這個間隙是由於html中的回車和空格造成的。但是由於語義化的要求和便於檢查的目的，我們不可能將所有的li都排在一行。
那麼有沒有其他的辦法來解決這個問題？
通過設置其父級元素的font-size爲0也可以解決這個問題。
<style type="text/css">
* { margin: 0; padding: 0; font-size: 14px; }
ul{
font-size:0;
}
li{
background-color: blue;
display: inline-block;
margin: 0;
padding: 0;
}
</style>
<script>
</script>
</head>
<body>
<ul>
<li><a href="#">首 頁</a></li>
<li><a href="#">新聞快訊</a></li>
<li><a href="#">產品展示</a></li>
<li><a href="#">售後服務</a></li>
<li><a href="#">聯繫我們</a></li>
</ul>這個辦法看上去不錯，暫時也沒發現有什麼其他的副作用。挺好的，又解決一個問題。