章節連結
若在前端網頁設計中,使用了 <li> 來製作水平選單時,有機會遇到無法水平置中的問題。這邊收集了兩種方法來解決。
(P.S. 若是要水平左右端,運用 float:left; float: right; 即可)
程式碼示範
方法一:浮動兩次再調整相對位置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div id=”nav”> <ul> <li>ABC</li> <li>DEF</li> </ul> </div> #nav{ float: right; left: -50%; position: relative; } #ul{ float:left; left: 50%; position: relative; } |
方法二:text-align + inline-block
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id=”nav”> <ul> <li>ABC</li> <li>DEF</li> </ul> </div> .nav { text-align: center; } .nav ul { display: inline-block; } |
方法三:display:table + margin
1 2 3 4 5 6 7 8 9 |
<ul> <li>ABC</li> <li>DEF</li> </ul> ul li { display: table; margin: 0 auto; } |
按讚加入粉絲團
延伸閱讀
- [筆記] AlphaCamp 不只是刷題的 Leetcode 訓練營 – 5
- [筆記] jQuery 搭配 Async / Await 一同使用
- [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 8
- [筆記] GoFullPage 好用的 Google Chrome 擷取需要捲動的瀏覽器視窗範圍
- [指南] Amazon Amplify 初探 – 佈署一個結合身分認證的 Vue.js 應用
GA瀏覽人氣:2,627