css默认垂直对齐内联块

Question

这是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%;
}

问题是标签：与第二行对齐。我知道如何解决这个问题：我可以在float: left;课程中使用vertical-align: top;或.label，但我想知道，为什么会这样？为什么< em>标签：跳到第二行？

P.S。抱歉我的英文。

Answer 1

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

  

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

供参考，以下是关于Mozilla Developer Network

的文章

Answer 2

请尝试这个;

 .inner {
  display: inline-block;
  vertical-align: middle;
  background: yellow;
  padding: 3px 5px;
}

DEMO

Answer 3

我认为由于定义display:inline-block正在创造这种情况..

更好地使用display:inline 这将解决您的问题......

这是代码

CSS

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

HTML

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