内联块元素不垂直对齐省略号溢出

Question

我正在显示内联 label 、 input 和 div 元素，希望它们垂直对齐，这最初是有效的。

但是，当我试图让 div 的内容溢出时出现省略号，它们不再垂直对齐

注意： 这是在 Chrome 46.02490.86

中观察到的

p {color:red;}
input,
label,
div {
  width: 50px;
  display: inline-block;
  margin-left: 5px;
}
label {
  text-align: right;
}
.longdesc {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<label>Name:</label>
<input type='text' value='James'>
<label>Desc:</label>
<div>Short</div>
<hr />
<label>Name:</label>
<input type='text' value='James'>
<label>Desc:</label>
<div class='longdesc'>Longer Description</div>
<p>
    In the second example "Long" is higher up
</p>

如何在不弄乱垂直对齐的情况下实现溢出效果？

Answer 1

将 vertical-align: top 添加到您的 inline-block 元素中：

p {color:red;}
input,
label,
div {
  width: 50px;
  display: inline-block;
  margin-left: 5px;
  vertical-align: top;
}
label {
  text-align: right;
}
.longdesc {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<label>Name:</label>
<input type='text' value='James'>
<label>Desc:</label>
<div>Short</div>
<hr />
<label>Name:</label>
<input type='text' value='James'>
<label>Desc:</label>
<div class='longdesc'>Longer Description</div>
<p>
    In the second example "Long" is higher up
</p>

Answer 2

我没看到 css 中的垂直对齐方式在哪里？默认 vertical-align 有属性 baseline，如果你想居中使用 vertical-align: middle

p {color:red;}
input,
label,
div {
  width: 50px;
  display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
}
label {
  text-align: right;
}
.longdesc {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<label>Name:</label>
<input type='text' value='James'>
<label>Desc:</label>
<div>Short</div>
<hr />
<label>Name:</label>
<input type='text' value='James'>
<label>Desc:</label>
<div class='longdesc'>Longer Description</div>
<p>
    In the second example "Long" is not higher up :)
</p>

内联块元素不垂直对齐省略号溢出

Inline block elements don't vertically align with ellipsis overflow

html

css

vertical-alignment