如何讓字橫向排列（導航欄）＋調整導航欄的每個項目間的間距大小？

javascript 網站 css

CherryYang 2022-05-11 19:16:46 ‧ 1072 瀏覽

分享至

Rafael iT邦新手 1 級 ‧ 2022-05-11 19:47:14 檢舉

我之前實作時，通常會在li 裡再加個 a tag超連結，因為後面一定會用到~
<ul>
<li>
<a></a>
</li>
</ul>

要橫向的話記得在ul設定display:flex 就會橫向了，個別寬度看你用自動或手動。
自動的話:
ul{justify-content;space-around;} (會自動分配間隔)
手動自己改的話:
ul{justify-content: start, end;}
li{margin: 依照不同單位設定 px, rem vw %} (設定每組的間隔)
px:是絕對單位，是固定長度值
rem: 相對預設值大小
vw: 隨視窗寬度而變
%: 看上一層寬度設多少，繼承多少下來，我通常都用這個因為，上面的body剛好是網頁寬，不像px亂調會有超出畫面疑慮