技術問答
技術文章
iT 徵才
Tag
聊天室
2025 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
0
如何讓字橫向排列(導航欄)+調整導航欄的每個項目間的間距大小?
javascript
網站
css
CherryYang
2022-05-11 19:16:46
‧
1452 瀏覽
分享至
如何讓字橫向排列(導航欄)+調整導航欄的每個項目間的間距大小?
回答
討論
2
邀請回答
追蹤
檢舉
×
邀請回答
輸入邀請回答者的帳號或暱稱
Loading
找不到結果。
已達邀請上限
邀請回答
{{ result.user.nickname }}
{{ result.user.account }}
已邀請的邦友
{{ invite_list.length }}
/5
取消邀請
{{ invite.nickname }}
{{ invite.account }}
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亂調會有超出畫面疑慮
我之前實作時,通常會在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.subject }}
{{ item.channelVendor }}
|
{{ item.webinarstarted }}
|
{{ formatDate(item.duration) }}
直播中
立即報名
尚未有邦友回答
立即登入回答
iThome鐵人賽
參賽組數
902
組
團體組數
37
組
累計文章數
17559
篇
完賽人數
213
人
看影片追技術
看更多
{{ item.subject }}
{{ item.channelVendor }}
|
{{ formatDate(item.duration) }}
直播中
熱門tag
看更多
15th鐵人賽
16th鐵人賽
13th鐵人賽
14th鐵人賽
12th鐵人賽
17th鐵人賽
11th鐵人賽
鐵人賽
2019鐵人賽
javascript
2018鐵人賽
python
2017鐵人賽
windows
php
c#
linux
windows server
css
react
熱門問題
如何控制被我走私的Web Shell?
發文一直被判定廣告或垃圾訊息
opencart4.1套件更新
dreambooth報錯:hidden_size
關於powershell dns policy 同步問題
Zoom分享時黑屏
git登入不了
unifi 無線設定
熱門回答
dreambooth報錯:hidden_size
關於powershell dns policy 同步問題
熱門文章
[為你自己學 n8n] 第 19 天,n8n 名片王(上)
第20天,實作PKCS#7數位信封 / 歐買尬豬霸王豬腳飯 (台北中山) | 30天滷肉飯
08-02:AI輔助演說與即時翻譯
第19天 Cloudflare Zaraz :插入任何 JS / 千尋味酸辣粉 | 30天板橋湳雅夜市
第19天,混合加密 / 黃記魯肉飯(台北中山) | 30天滷肉飯
IT邦幫忙
×
標記使用者
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{ result.label }}
{{ result.account }}