行內塊元素不垂直與省略號溢出對齊

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

對，我沒有指定，因爲我沒有預料到必須定義垂直對齊，因爲他們在實現溢出省略號代碼之前排隊 –

行內塊元素不垂直與省略號溢出對齊

回答

相關問題