如果一個(gè)ul下面有多個(gè)li,而且這些li要橫向排列,不知道每個(gè)li的寬度,同時(shí)也不知道ul的寬度,如果讓這個(gè)ul水平居中呢?
目前知道了兩個(gè)方法:
1、ul{text-align:centrer;}
li{display:inline;}
這種方法是把li轉(zhuǎn)換成行內(nèi)元素,然后父級(jí)元素居中顯示;
2、用一個(gè)div把ul包起來(lái),<div id="wrap"></div>
#wrap{float:left;position:relative;left:50%;}
ul{position:relative;left:-50%;}
這種方法首先把父級(jí)元素浮動(dòng)起來(lái),讓子元素的內(nèi)容撐開(kāi)寬度,這樣父元素和子元素的寬度就是一致的;
然后讓父元素的最左邊與body(假設(shè)body就是最外邊的元素)的中線對(duì)齊,同時(shí)相當(dāng)于ul的左邊也與body的中線對(duì)齊了;
然后再把ul的左側(cè)向左移動(dòng)50%(wrap的寬度與ul的一致),即可居中!