垂直对齐输入 [英] Vertically align inputs with each other

问题描述

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

I have two inputs, but the pre-displayed labels have different length, causing the inputs not to start from the same position (vertically speaking). How to achieve that?

我的一些尝试是：

input {
    margin-left: 50px;
}

input {
    vertical-align:middle;
}

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

Please notice that display: block; will make the label and input lose their initial corresponding positions!

我的 JSFiddle 。

推荐答案

您可以使用 CSS表格布局 。父元素充当表行，子元素充当表单元格。

You can make use of CSS table layout. The parent element acts as a table row and the child elements as table cells.

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

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

这篇关于垂直对齐输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！