[前端]如何寫一個水平導航欄？（浮動、inline-block+消除間距）
阿新 • • 發佈：2018-03-10
lock 解決 包含 mov html標簽 http 全部 lis ont
在看W3school時，看到一個很好的例子，如何制作一個水平的導航欄？沒有任何要求，只需要達到下面的效果：
我認為這個例子包含了很多css布局需要了解的知識，因此單獨寫一下。
W3school上面的方法是這樣的——全部設置浮動：
<!DOCTYPE html> <html> <head> <style> ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } a { display:block; width:60px; background-color:#dddddd; } </style> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html>
這個涉及到浮動的知識，這裏不詳述了。但是，還有沒有其他方法呢？我想到另外一種方法，不用ul，直接把a設置為inline-block不就行了嗎（原本的inline顯然不行，因為不能設置長度，會導致大小不一）？
於是，我把代碼改成了下面：
<!DOCTYPE html> <html> <head> <style> a { display:inline-block; width:60px; background-color:#dddddd; } </style> </head> <body> <a href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </body> </html>
但是，得出來的結果不如人意：
中間的間隙並不是我想要的（雖然實際開發中這些間隙也許會使布局更加美觀），但這些間隙是因何而來？我上網查了一下，發現原來inline-block之間出現間隙的原因是標簽之間的空格：
</a> <a href="#news">
像這裏兩行之間就會被視作一個空格了，我們只需要消除HTML標簽之間的空格就可以解決這個問題了。
這個網址很好地概括了消除inline-block元素間間距的方法：
http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/
其中，我認為第一種方法是最好的：
像這樣：
<body> <a href="#home"> Home</a><a href="#news"> News</a><a href="#contact"> Contact</a><a href="#about"> About</a> </body>
或者：
<body> <a href="#home">Home</a ><a href="#news">News</a ><a href="#contact">Contact</a ><a href="#about">About</a> </body>
再或者使用註釋：
<body> <a href="#home">Home</a><!-- --><a href="#news">News</a><!-- --><a href="#contact">Contact</a><!-- --><a href="#about">About</a> </body>
這樣，我們就有兩種方法寫水平導航條了。當然方法還有很多，這篇博客最主要還是用來提及消除inline-block元素間間距的方法。
[前端]如何寫一個水平導航欄？（浮動、inline-block+消除間距）