使用嵌套列表的css-div重疊

這個簡化的html/css顯示了嵌套列表後的div似乎沒有正確放置。爲什麼不在列表末尾的灰色（#eee）div？（它有一個明確的：兩者）似乎低於「一，二，三」，但不是「Alpha，Beta，Gamma」。使用嵌套列表的css-div重疊

<html> 
<head> 
<style> 
body  { padding:0; border:0; margin:0; } 
#bodydiv { outline:1px dashed black; } 
li  { width:100px; height:50px; outline:1px dotted blue; } 
</style> 
</head> 
<body> 
<div id="bodydiv"> 
    <div style="outline:1px dotted black;"> 
    <ul> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three 
     <ul> 
      <li>Alpha</li> 
      <li>Beta</li> 
      <li>Gamma</li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
    <div style="clear:both; height:20px; background:#eee;">--First--</div> 
    <div style="width:100px; height:50px; background:#fdd; outline:1px dotted red;"></div> 
    <div style="width:100px; height:50px; background:#dfd; outline:1px dotted red;"></div> 
    <div style="width:100px; height:50px; background:#ddf; outline:1px dotted red;"></div> 
</div> 
</body> 
</html>

來源

2014-05-04 dcromley

[** **撥弄]（http://jsfiddle.net/QzRTT/） – Oriol

你分配一個特定的height到包含嵌套ul的li，所以它不會呈現你想要的方式。剛剛宣佈的最低高度min-height，而不是一個固定的height該元素的，你可以擺脫clear:both，它實在沒有什麼在這裏：

li { 
    width:100px; 
    min-height:50px; 
    outline:1px dotted blue; 
}

見這裏：http://jsbin.com/zowusegu/2/edit/

來源

2014-05-04 19:38:49 pablopixel

哦，老鼠（我在此花了很長時間）。我清楚地知道：兩者在這裏都不合適。非常感謝。 – dcromley

使用嵌套列表的css-div重疊

回答

相關問題