Css 为什么这个输入范围会将内容向下推？

我正在尝试对齐标签列旁边的垂直范围输入。输入将有步骤，因此小气泡将始终位于标签旁边，并且我已获得匹配的高度，因此这没有问题

但是，无论我如何构造这两个框（左侧的输入垂直范围和右侧的标签），输入总是向下推第一个标签，就像它是一个显示：内联块元素一样

HTML:

简短回答 这是垂直对齐的预期行为：基线（隐式默认值）。您可以使用：

.cell-right {
    display: table-cell;
    vertical-align: top;
}

---

解释 范围输入和第二个表格单元格的文本都是同一个单元格的一部分。关于默认的

vertical align

值（

baseline

），则表示：

基线
将长方体的基线与父长方体的基线对齐。如果长方体没有基线，请将底部边距边缘与父对象的基线对齐

这意味着范围输入的底部与父框的基线对齐，第二个单元格的第一行框的基线也对齐。在这里，您可以看到父框的基线位置：

这是因为垂直范围输入会拉伸包含线框，从而产生您看到的效果

---

关于你的评论：

输入总是向下推第一个标签，就像它是一个display:inline块元素一样

---

范围输入是a，其行为实际上几乎与

内联块

元素相同。

这是预期的行为。默认情况下，

vertical align

属性设置为

baseline

，从而产生结果。将

vertical align

属性更改为

top

，将得到所需的结果

.cell-right {
    display: table-cell;
    vertical-align:top;
}

---

垂直对齐有时会很棘手，而且里面有很多魔法。这里有一篇很好的详细文章，将其分解为可以理解的术语：

如果有人能在这个答案中找到不准确的信息，我很想指出。这将极大地帮助我提高我的知识，以及我为网站贡献的内容。为了更加清晰，我重写了某些部分。

.cell-right {
    display: table-cell;
    vertical-align: top;
}

.cell-right {
    display: table-cell;
    vertical-align:top;
}