USWDS

Question

我正在使用 U.S。网页设计系统 (USWDS) 在我正在从事的一个项目中，我正在努力解决一些表面上看起来应该很简单的事情：如何对齐表单标签，使它们出现在相应输入的左侧，而不是在他们之上？

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

根据this answer it's possible to achieve the result I want using modern CSS Grid layout, but so far I haven't figured out how to make that play nicely with the USWDS styling, which does not use CSS Grid.

任何人都可以帮助我：

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

下面是我的 HTML:

的简化片段

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

Answer 1

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

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

USWDS - How to align form labels to the left of inputs?

css

forms

alignment

styling