iT邦幫忙

0

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

javascript 網站 css
CherryYang 2022-05-11 19:16:46 ‧ 1729 瀏覽

  • 分享至 

  • xImage

如何讓字橫向排列（導航欄）＋調整導航欄的每個項目間的間距大小？
https://ithelp.ithome.com.tw/upload/images/20220511/20140542w35lqft10c.pnghttps://ithelp.ithome.com.tw/upload/images/20220511/20140542aj1wKaReGA.png

Rafael iT邦研究生 3 級 ‧ 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 }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答
iThome鐵人賽
參賽組數
929 組
團體組數
32 組
累計文章數
20253 篇
完賽人數
534 人
iT+看影片追技術 看影片追技術 看更多
熱門tag
15th鐵人賽 16th鐵人賽 13th鐵人賽 18th鐵人賽 17th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css
熱門問題
熱門回答
熱門文章
IT邦幫忙