[筆記] CSS ul li 水平置中方法 | css ul li橫向水平
章節連結若在前端網頁設計中,使用了
- ABC
- DEF
若在前端網頁設計中,使用了 <li> 來製作水平選單時,有機會遇到無法水平置中的問題。這邊收集了兩種方法來解決。(P.S. 若是要水平左右端,運用 float:left; float: right; 即可)
程式碼示範 方法一:浮動兩次再調整相對位置<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; }
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%;