<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>不定寬塊狀元素水平居中</title><style>.container{? ? float:left;? ? position:relative;? ? left:50%;}.container ul{ list-style:none; margin:0; padding:0;? ? position:relative;? ? left:-50%;}.container li{float:left;display:inline;margin-right:8px;}/*下面是代碼任務(wù)區(qū)*/.wrap{? ? position:relative;? ? float:right;? ? right:50%;}.wrap-center{? ? background:#ccc;? ? position:relative;? ? right:-50%;}</style></head><body><div class="container"> <ul>? ? <li><a href="#">1</a></li>? ? ? ? <li><a href="#">2</a></li>? ? ? ? <li><a href="#">3</a></li>? ? </ul></div><br><!--下面是代碼任務(wù)區(qū)--><div class="wrap">? ? <div class="wrap-center">我們來學(xué)習(xí)一下這種方法。</div></div></body></html>
4 回答
-
Parmer影響到了，在網(wǎng)頁(yè)上顯示出來，是看不到第一個(gè)div的
LUCK星001
TA貢獻(xiàn)19條經(jīng)驗(yàn) 獲得超21個(gè)贊
clear；both;是清楚浮動(dòng)的； 當(dāng)?shù)谝粋€(gè)div向左浮動(dòng)的時(shí)候，那么后面的div也會(huì)跟著向左浮動(dòng)啊，因此就會(huì)出現(xiàn)被覆蓋掉；
float:left;就不受position:relative;的影響了，如果你想讓第二個(gè)居中的話
.wrap{
? text-align:center; ??
}
.wrap-center{
? ? background:#ccc;
}
-
Parmer你這種方法兩個(gè)div確實(shí)都居中了，但還是會(huì)覆蓋。除了clear 浮動(dòng)，還有沒有其他辦法
添加回答
舉報(bào)
0/150
提交
取消