html – 两个没有对齐的内联块样式的div

概述我有两个div标签,只有一个有输入标签;为什么输出是这样的？ div.logo, div.form { display: inline-block; height: 200px; width: 200px; border: 1px dotted;} <div class="logo"> <input type="text"></div><div class="form 我有两个div标签,只有一个有输入标签;为什么输出是这样的？

div.logo,div.form {   display: inline-block;  height: 200px;  wIDth: 200px;  border: 1px dotted;}

<div >  <input type="text"></div><div ></div>

输出：

有谁能解释一下？这是小提琴：https://jsfiddle.net/ag487L5m/

解决方法 默认情况下,内联块和内联块元素设置为vertical-align：baseline.

由于div.logo有一个文本输入,div.form现在是一个内联块元素,它在输入的基线上对齐.

将vertical-align：top添加到CSS应修复它.如：

div.logo,div.form {     display: inline-block;    height: 200px;    wIDth: 200px;    border: 1px dotted;    vertical-align: top;}

div.logo,div.form {     display: inline-block;    height: 200px;    wIDth: 200px;    border: 1px dotted;    vertical-align:top;}

<div >  <input type="text"></div><div ></div>

总结

以上是内存溢出为你收集整理的html – 两个没有对齐的内联块样式的div全部内容，希望文章能够帮你解决html – 两个没有对齐的内联块样式的div所遇到的程序开发问题。

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