对齐的标签和垂直

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; 
}