USWDS - 如何将表单标签对齐到输入的左侧？答案

【问题标题】：USWDS - How to align form labels to the left of inputs?USWDS - 如何将表单标签对齐到输入的左侧？
【发布时间】：2021-05-18 20:56:13
【问题描述】：

我在我正在处理的项目中使用 U.S. Web Design System (USWDS) ，我正在努力解决表面上看起来应该很简单的事情：如何对齐表单标签，以便它们出现在左侧它们对应的输入，而不是在它们之上？

其他一些 CSS 库将此称为 horizontal form，但我也看到它被称为“内联”字段。

根据this answer，使用现代 CSS 网格布局可以实现我想要的结果，但到目前为止，我还没有弄清楚如何使用 USWDS 样式很好地实现这一点，does not use CSS Grid.

谁能帮助我：

使用 USWDS 组件和utility classes 的某种组合创建一个水平表单，或者如果这不切实际...
通过使用自定义 CSS 覆盖 USWDS 样式来生成水平表单，但不会造成太多冲突或违反标准？

下面是我的 HTML 的简化 sn-p：

<link href="https://cdn.jsdelivr.net/npm/uswds@2.8.0/dist/css/uswds.min.css" rel="stylesheet" />


<form class="usa-form">
    <div class="usa-form-group">
        <label class="usa-label" for="somefield1">Sample label</label>
        <input class="usa-input" type="number" name="somefield1" value=0 />
    </div>
    <div class="usa-form-group">
        <label class="usa-label" for="somefield2">Another label</label>
        <input class="usa-input" type="number" name="somefield2" value=0 />
    </div>
</form>

【问题讨论】：

标签： css forms alignment styling uswds

【解决方案1】：

您可以在usa-form-group 上使用flex 使它们彼此相邻，如本代码沙箱所示，并对元素边距https://codesandbox.io/s/nostalgic-moon-q7i7f?file=/styles.css 进行一些其他小的修饰

【讨论】：