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

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>