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

javascript 網站 css

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

分享至

Rafael iT邦研究生 4 級 ‧ 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亂調會有超出畫面疑慮

CherryYang iT邦新手 4 級 ‧ 2022-05-11 20:15:28 檢舉

哇！太詳細了吧！謝謝你～～～

登入發表討論

熱門推薦

{{ item.channelVendor }} | {{ item.webinarstarted }} |

直播中

尚未有邦友回答

立即登入回答

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react

IT邦幫忙

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

尚未有邦友回答

標記使用者