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元素：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

我不知道你在css中的垂直对齐位置是什么？默认情况下，vertical-align具有属性baseline，如果您想集中使用vertical-align: middle

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: