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

Question

我正在为RPG制作一个纸笔角色表的副本，作为学习html / css的一种方式。然而，在尝试设置表单样式时，我在开头就卡住了，并保留了有关该字符的一些背景信息。

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

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

$(document).ready(function(){})

.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>和类围绕每个“行”并用css设置它们的宽度。然而，这没有成功，所以我恢复到我的初始版本并被卡住了。

Answer 1

许多人可能会建议获得一个css框架，但你想要的是一些简单的css。

首先，你的html基本上由一个包含一系列行的表单组成，除了一行包含一行中的两个字段。所以我稍微修改了你的html，每行被一个类包含为.form-row的div包裹并删除<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>