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