对齐标签并垂直输入

Question

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如何对齐它以使它看起来像这样：

目前，第一个标签比第二个标签长，并且没有正确对齐。我怎样才能解决这个问题？感谢

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

将固定宽度设置为标签：

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

label{
  width: 60px; 
}

Answer 3

我想这将足够而不是那个

.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>