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

我正在显示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>

如何在不搞乱垂直对齐的情况下达到溢出效果？

来源

2015-12-14 Eric Phillips

不垂直对齐上下？水平对齐是左和右？ 'inline-block'是从左到右显示一个元素。 'block'是显示元素的上下流动（换句话说，堆叠在另一个竖直的顶部）我看到了，你希望内容对齐，好的。 – zer00ne

通过垂直对齐我的意思是文本内联，没有更高或更低。或许我的词选择不是最好的 –

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

来源

2015-12-14 18:30:39 Amit

谢谢，将接受作为答案.-奇怪的是，'垂直对齐：顶部，中部，底部'都产生了相同的结果。 –

@EricPhillips - 那是因为你有一条线，所以顶部中间和底部是相同的。尝试使用多行来查看差异。 – Amit

单线或相同高度的元素？） –

我看不出哪里是在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>

来源

2015-12-14 18:31:43

对，我没有指定，因为我没有预料到必须定义垂直对齐，因为他们在实现溢出省略号代码之前排队 –

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

回答

相关问题