這是我的結構：
<div class="list">
<div class="list-item">
<span class="item-title">St</span>
<button class="item-button">click</button>
</div>
<div class="list-item">
<span class="item-title">Middletext</span>
<button class="item-button">click</button>
</div>
<div class="list-item">
<span class="item-title">This line contains a long text.</span>
<button class="item-button">click</button>
</div>
</div>
所以，這段代碼創建了三行文本，短、中、長。
當然，每個item-title元素的寬度等于文本的長度，因此，第一個item-title元素的寬度最小，第二個元素的寬度較大，最后一個元素的寬度最大。
我需要在 CSS 中做的是將所有item-title元素的寬度設定為最長item-title元素的寬度。我需要這個以便我可以將所有item-button元素對齊到相同的水平位置。
當然，我可以硬編碼width所有item-title元素的屬性，但我真的需要這個寬度是動態的，因為實際上我沒有這樣的靜態專案串列。我使用 Vue 根據可以更改的變數值生成那些串列項。
那么，我該如何對 HTML 說：“請將所有按鈕對齊到最長文本行的末尾”？
uj5u.com熱心網友回復：
有幾種方法可以實作這一點，最簡單的可能是表格
.list
{
display: table;
}
.list-item {
display: table-row;
}
.item-title, .item-button {
display: table-cell;
}<div class="list">
<div class="list-item">
<span class="item-title">St</span>
<button class="item-button">click</button>
</div>
<div class="list-item">
<span class="item-title">Middletext</span>
<button class="item-button">click</button>
</div>
<div class="list-item">
<span class="item-title">This line contains a long text.</span>
<button class="item-button">click</button>
</div>
</div>uj5u.com熱心網友回復：
這是一個 flexbox 方法：
.list {
max-width: fit-content;
}
.list-item {
white-space: nowrap;
display: flex;
}
.item-title {
display: inline-block;
flex-grow: 1;
}<div class="list">
<div class="list-item">
<span class="item-title">St</span>
<button class="item-button">click</button>
</div>
<div class="list-item">
<span class="item-title">Middletext</span>
<button class="item-button">click</button>
</div>
<div class="list-item">
<span class="item-title">This line contains a long text.</span>
<button class="item-button">click</button>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/535214.html
標籤：网页格式CSS
上一篇：圖示未定位到右上角