網頁排版實現功能橫向按鈕(不使用Flexbox)

至從 Flexbox 樣式出現後，讓網頁排版舒服很多，讓常見的選單排版，透過此設定即可輕鬆實現，

但為何還要記錄一下不使用 flexbox 的寫法，沒甚麼就是加深印象而已...

首先我們產生基本的功能 Layout

此時，我們加上基本的 css

畫面

但是我們希望功能選單能夠橫向排列，並且各按鈕有點距離，以下加入css

畫面呈現

其中關鍵就是將 <li> 元素的 display 屬性調整為 inline-block

由於，<li> 預設的 display 為 list-item(如下圖)，改為 inline-block 後除了可以行內並排

之外亦可以設定高度

說到高度，有個實務上很雞肋的要求，就是 <a> 要可以很完美的出現 hover 的效果

此時<a> 也要改為 display:inline-block，這樣設定高度才會有效果，而預設的 inline 

是不會有高度的，即使你設定了

參考

• https://htmlreference.io/