Question

这个简化的html / css显示嵌套列表后面的div似乎无法正确放置。为什么不是列表末尾下方的灰色（#eee）div？（它有一个明确的：两者）它似乎低于＆＃34;一，二，三＆＃34;，但不是＆＃34; Alpha，Beta，Gamma＆＃34;。

<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>

Answer 1

您正在为包含嵌套height的{{1}}分配特定的li，因此无法按照您想要的方式呈现。只需声明该元素的最小高度ul而不是固定的min-height，您就可以摆脱height，它在这里没有任何意义：

clear:both

请在此处查看：http://jsbin.com/zowusegu/2/edit/

css - 使用嵌套列表重叠div

1 个答案: