對齊的標籤和垂直

Question

.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.group { 
 
    display: flex; 
 
    width: 300px; 
 
    justify-content: space-between; 
 
    margin-bottom: 10px; 
 
} 
 
.small { 
 
    width: 60px; 
 
}

<div class="wrapper"> 
 
    <div class="group"> 
 
    <label>From</label> 
 
    <input> 
 
    <input class="small"> 
 
    </div> 
 
    <div class="group"> 
 
    <label>To</label> 
 
    <input> 
 
    <input class="small"> 
 
    </div> 
 
</div>

輸入我該如何調整這使得它看起來像這樣：

目前，第一個標籤是長於第二並沒有正確對齊。我怎樣才能解決這個問題？由於

Answer 1

設置固定寬度標籤：

.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.group { 
 
    display: flex; 
 
    width: 300px; 
 
    justify-content: space-between; 
 
    margin-bottom: 10px; 
 
} 
 
.small { 
 
    width: 60px; 
 
} 
 

 
label{ 
 
    width: 60px; 
 
}

<div class="wrapper"> 
 
    <div class="group"> 
 
    <label>From</label> 
 
    <input> 
 
    <input class="small"> 
 
    </div> 
 
    <div class="group"> 
 
    <label>To</label> 
 
    <input> 
 
    <input class="small"> 
 
    </div> 
 
</div>

Answer 2

我想這將是替代那種

.small { 
 
    width: 60px; 
 
}

<table> 
 
<tr> 
 
<td><label>From</label></td> 
 
<td> <input> <input class="small"></td> 
 
<tr> 
 
<td> <label>To</label></td> 
 
<td> <input> <input class="small"></td> 
 
</tr> 
 
</table>

Answer 3

設置足夠一個固定的寬度標註：

.wrapper { 
    display: flex; 
    flex-direction: column; 
} 
.group { 
    display: flex; 
    width: 300px; 
    justify-content: space-between; 
    margin-bottom: 10px; 
} 
.small { 
    width: 60px; 
} 

label{ 
    width: 60px; 
}