html - CSS默认垂直对齐与内联块

这是code。

我有带有标签，输入和助手的典型表格：



代码：

的HTML：

<div class="container">
  <span class="label">Label:</span>
  <div class="el">
    <input>
    <span>helper helper helper</span>
  </div>
</div>

CSS：

.container {
  outline: 1px solid black;
  width: 200px;
  height: 100px;
}
.label{
  display: inline-block;
  width: 30%;
}
.el{
  display: inline-block;
  width: 60%;
}
input{
 width: 50%;
}

问题是Label：与第二行相对。我知道如何解决这个问题：我可以在float: left;类中使用vertical-align: top;或.label，但是我想知道，为什么会这样？为什么选择标签：跳至第二行？

ps。对不起我的英语不好。

最佳答案

这是因为vertical-align的默认值为baseline，该值...


  将元素的基线与其父元素的基线对齐


供参考，这是关于Mozilla Developer Network的文章

关于html - CSS默认垂直对齐与内联块，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32045382/