如何使用 css 在表单中对齐输入字段的端点？

Question

我正在为 RPG 制作纸笔字符表的副本，作为学习 html/css 的一种方式。但是，当我尝试设置表单样式时，我一开始就卡住了，需要一些关于角色的背景信息。

目前，我已经设法使标签和输入字段的形式看起来像左边的图片。然而，纸笔字符表（以及所需的外观）的格式与右侧的一样。

下面是我正在使用的代码。

.sheet-character-background form input,
label {
  margin-bottom: 10px;
}

.age-input {
  width: 60px;
}

<div class="sheet-character">
  <div class="sheet-character-background">
    <form>
      <label>Name</label>
      <input type="text" name="attr_name">
      <br>
      <label>Race</label>
      <input type="text" name="attr_race">
      <br>
      <label>Gender</label>
      <input class="gender-input" type="text" name="attr_gender">
      <label>Age</label>
      <input class="age-input" type="number" name="attr_age" min="0">
      <br>
      <label>Religion</label>
      <input type="text" name="attr_religion">
      <br>
      <label>Occupation</label>
      <input type="text" name="attr_occupation">
      <br>
      <label>Archetype</label>
      <input type="text" name="attr_archetype">
      <br>
      <label>Environment</label>
      <input type="text" name="attr_environment">
      <br>
      <label>Background</label>
      <input type="text" name="attr_backgrund">
    </form>
  </div>
</div>

从我拥有的东西到我想要的东西的步骤是什么？我用<div> 和类围绕每个“行”，并在css 中设置它们的宽度。然而这并没有成功，所以我恢复到我的初始版本并卡住了。

Answer 1

很多人可能会建议获得一个 css 框架，但是你想要的可以用一些简单的 css 来完成。

首先，您的 html 基本上由一个包含一系列行的表单组成，除了一行由一行中的两个字段组成。所以我稍微修改了你的html，每一行都被一个div包裹，类为.form-row并删除<br>（让css进行渲染而不是使用html标签）：

为了达到你想要的效果，接下来会为form设置一个宽度，以及每个row的行为方式，并设置input的宽度，最后覆盖特殊情况的设置.age-input.

这只是实现您想要的“快速而肮脏”的方法，希望它为您的学习提供一些想法和建议。

form {
    width: 300px;
}
.form-row {
    display:flex;
}
input {
    width: 100%;
}
.age-input {
    width: 60px;
}

<form>
    <div class="form-row">
        <label>Name</label>
        <input type="text" name="attr_name">
    </div>
    <div class="form-row">
        <label>Race</label>
        <input type="text" name="attr_race">
    </div>
    <div class="form-row">
        <label>Gender</label>
        <input type="text" name="attr_gender">
        <label>Age</label>
        <input class="age-input" type="number" name="attr_age" min="0">
    </div>
    <div class="form-row">
        <label>Religion</label>
        <input type="text" name="attr_religion">
    </div>
    <div class="form-row">
        <label>Occupation</label>
        <input type="text" name="attr_occupation">
    </div>
    <div class="form-row">
        <label>Archetype</label>
        <input type="text" name="attr_archetype">
    </div>
    <div class="form-row">
        <label>Environment</label>
        <input type="text" name="attr_environment">
    </div>
    <div class="form-row">
        <label>Background</label>
        <input type="text" name="attr_backgrund">
    </div>
</form>