Firefox / Chrome空标签内容位置故障/错误

Question

如何将这些红色框对齐？中间一个人无缘无故跳下来。

nav label {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: red;
}

<nav>
  <label></label>
  <label>2</label>
  <label></label>
</nav>

我需要将空白标签保留为空。

Answer 1

您需要设置vertical-align并将其默认值更改为基线，这是产生不良结果的原因，例如。 top：

nav label {
  width: 50px;
  height: 50px;
  display: inline-block;
  vertical-align: top; /* or "middle", "bottom" */
  background-color: red;
}

<nav>
  <label></label>
  <label>2</label>
  <label></label>
</nav>