HTML – 为什么第二个div滑落？

概述我有下一个html / css代码： .first,.second { width: 200px; height: 100px; border: 1px solid #333; text-align: center; display: inline-block}.first > ul { list-style: none; margin: 0; paddin 我有下一个HTML / CSS代码：

.first,.second {  wIDth: 200px;  height: 100px;  border: 1px solID #333;  text-align: center;  display: inline-block}.first > ul {  List-style: none;  margin: 0;  padding: 0;}

<div ><h1>first div</h1><ul><li>text</li></ul></div><div ><h1>second div</h1></div>

当我把ul元素放在第一个div中时,为什么第二个div会滑落？

JS Bin link,以防万一.
谢谢！

解决方法 因为vertical-align的默认值(适用于内联级和表格单元格)是基线,所以需要使用vertical-align：top.

.first,.second {  wIDth: 200px;  height: 100px;  border: 1px solID #333;  text-align: center;  display: inline-block;  vertical-align: top;}.first > ul {  List-style: none;  margin: 0;  padding: 0;}

<div >  <h1>first div</h1>  <ul>    <li>text</li>  </ul></div><div >  <h1>second div</h1></div>

总结

以上是内存溢出为你收集整理的HTML – 为什么第二个div滑落？全部内容，希望文章能够帮你解决HTML – 为什么第二个div滑落？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。