火狐/铬空标签内容位置故障/错误

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并更改其默认值baseline，这是不需要的结果背后的原因，例如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>