為什么li沒有排成一行？謝謝
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定寬塊狀元素水平居中</title>
<style>
.container{
??? float:left;
?? ?position:relative;
?? ?left:50%;
?? ?border:1px solid blue;
}
.container ul{
?? ?list-style:none;
?? ?margin:0;
?? ?padding:0;?? ?
?? ?position:absolute;
?? ?left:-50%;
?? ?border:1px solid red;
}
.container li{float:left;display:inline;margin-right:8px;}
</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>
</body>
</html>
2017-09-11
我替樓上的小伙伴解答了吧,雖然碼字有點(diǎn)麻煩
1.1 設(shè)置float后會(huì)自動(dòng)把塊級(jí)元素的行框縮短至內(nèi)容+內(nèi)邊距+外邊距+邊框大小,你如果給div設(shè)置了足夠的width或者padding就會(huì)發(fā)現(xiàn)也會(huì)排列成一行.
1.2 刪除float以后div的寬度變成body的100%,div右移50%,后面ul又相對(duì)div向左移動(dòng)了50%,所以會(huì)左對(duì)齊,同時(shí)也證實(shí)了1.3的寬度是div的寬度這一點(diǎn).
1.3 -50%中的50%指的是父元素的寬度,即div的寬度.
.container{ ????padding:50px; ????float:left; ????position:relative; ????left:50%; ????border:1px?solid?blue; }2.這個(gè)問題同1.1,設(shè)置的寬度不會(huì)被縮減,所以可以排成一列
3.絕對(duì)定位移動(dòng)后會(huì)生成一個(gè)塊級(jí)框,而不論原來它在正常流中生成何種類型的框,同時(shí)會(huì)縮減塊級(jí)元素行框大小.刪除absolute或者改為relative都會(huì)自動(dòng)排成一行
2017-09-08
通過樓上朋友的建議，現(xiàn)在總結(jié)了3個(gè)解決方法：
1、div.container去掉float:left ;? 結(jié)果：li成了一行，但ul不居中了，除非再把ul的left:-50%;去掉
?問題：1》為什么去掉float后li成一行？
????????????2》為什么去掉float后ul才會(huì)左對(duì)齊？
??????????? 3》去掉float后，div是relative，ul是absolute，ul的偏移應(yīng)該參照父元素div，那么left:-50%;的50%是誰的寬度的50%？
2、.container ul設(shè)置寬度；
問題：一般ul不需要設(shè)置寬度，li設(shè)置好后自成一行。為什么設(shè)置了ul的寬度后，才會(huì)一列？
3、你的辦法，.container ul去掉absolute；
問題：為什么要去掉absolute？？？我感覺absolute不影響，僅僅脫離了文檔流，內(nèi)容該怎么顯示就怎么顯示。
2017-09-07
.container ul{
?? ?list-style:none;
?? ?margin:0;
?? ?padding:0;?? ?
?? ?position:absolute;
?? ?left:-50%;
?? ?border:1px solid red;
}你這個(gè)用了絕對(duì)定位，把它去掉就好！
2017-09-07
你沒有給他們?cè)O(shè)寬度 給.container或ul設(shè)個(gè)寬度就可以了