若在前端網頁設計中，使用了 <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; } |
按讚加入粉絲團
