将输入相互垂直对齐

Question

我有两个输入，但预先显示的标签长度​​不同，导致输入不从相同位置开始（垂直方向）。如何实现？

我的一些尝试是：

input {
    margin-left: 50px;
}

input {
    vertical-align:middle;
}

请注意display: block;会使标签和输入失去其初始对应位置！

我的JSFiddle。

Answer 1

您可以使用CSS table layout。 parent元素用作表格行，子元素用作表格单元格。

＆＃13;

＆＃13;

.input-container {
  display: table-row;
}
.input-container * {
  display: table-cell;
  margin-left: 5px;
}

＆＃13;

<fieldset>
  <legend>Team1</legend>
  <div class="input-container">
    <label for="player1">Player1</label>
    <input type="number" name="player1">
  </div>
  <div class="input-container">
    <label for="player2">Player2345</label>
    <input type="number" name="player2">
  </div>
</fieldset>

＆＃13;

＆＃13;

＆＃13;