为什么此输入范围会向下推送内容？

Question

我正在尝试在一列标签旁边对齐垂直范围输入.输入将有步骤,所以小气泡将始终位于标签旁边,我已经达到高度匹配,所以这没问题.

但是,无论我如何构造两个框(左侧的输入垂直范围和右侧的标签),输入始终将第一个标签向下推,几乎就像显示:内联块元素.

HTML:

<div class="cell-left">
  <input type="range" orient="vertical" min="0" max="3" step="1" />
</div>
<div class="cell-right">
  <div class="row">Hello</div>
  <div class="row">Hello</div>
  <div class="row">Hello</div>
  <div class="row">Hello</div>
</div>

CSS:

input[type=range] {
  writing-mode: bt-lr; /* IE */
  -webkit-appearance: slider-vertical; /* WebKit */
  width: 8px;
  height: 4rem;
  padding: 0 5px;
}
.cell-left {
  display: table-cell;
}
.cell-right {
  display: table-cell;
}

https://jsfiddle.net/byn4kv0z/

Answer 1

这是预期的行为.vertical-align默认情况下,该属性设置为baseline导致结果的属性.更改vertical-align属性top将为您提供所需的结果.

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

的jsfiddle

垂直对齐有时候非常棘手,并且那里有很多魔法.这是一篇很好的详细文章,将其分解为可理解的术语:垂直对齐:您需要知道的所有内容