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

问题是 Label: 在第二行的对面对齐。我知道如何解决这个问题：我可以在 .label class 中使用 float: left; 或 vertical-align: top;，但我想知道， 为什么会这样？ 为什么 Label: 跳到第二行？

p.s。对不起我的英语。

Answer 1

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

Aligns the baseline of the element with the baseline of its parent

作为参考，这里是 Mozilla Developer Network

上的文章

Answer 2

我认为由于 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>

Answer 3

请试试这个；

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

DEMO

css 默认与行内块垂直对齐

css default vertical-align with inline-block

html

css

vertical-alignment

css-float