如何在 HTML 表单中对齐输入行 - Html

在 HTML 中创建表单时，一些输入行可能会偏移或对齐不正确。在本指南中，我们将学习如何在 HTML 表单中对齐输入行以获得更好的外观和体验。

使用表格

一种简单的方式是使用表格，将每个输入行放在一个单独的单元格中。这样可以确保每个输入行都对齐，例如：

<form>
  <table>
    <tr>
      <td><label for="name">Name:</label></td>
      <td><input type="text" id="name" name="name"></td>
    </tr>
    <tr>
      <td><label for="email">Email:</label></td>
      <td><input type="email" id="email" name="email"></td>
    </tr>
  </table>
</form>

效果如下：

使用 CSS

另一种方法是使用 CSS 调整每个输入行的间距和宽度。我们可以使用 display: flex 属性将每个输入行包装在一个 Flex 容器中，并使用 justify-content 和 align-items 属性对齐每个输入行。

<form>
  <div class="input-row">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="input-row">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </div>
</form>

<style>
  .input-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
  }
  
  .input-row label {
    flex-basis: 20%;
    margin-right: 10px;
  }
  
  .input-row input {
    flex-basis: 70%;
    padding: 5px;
  }
</style>

效果如下：

结论

以上是两种常用的方法，表格和 CSS，来对齐 HTML 表单中的输入行。根据需求和场景的不同，选择最适合的方法来实现表单的对齐就可以了。