USWDS -如何使表单标签与输入的左边对齐？

Question

我在我正在做的一个项目中使用了美国网页设计系统(USWDS)，我正在为一些表面上看起来应该非常简单的东西而奋斗:如何使表单标签对齐，使它们出现在相应输入的左边，而不是在它们之上？

其他一些CSS库称它为水平形式，但我也看到它被称为“内联”字段。

根据这个答案，可以使用现代CSS布局实现我想要的结果，但到目前为止，我还没有弄清楚如何与USWDS样式很好地配合，不使用CSS网格。

有人能帮我一下吗？

• 使用USWDS组件和实用程序类的某些组合创建一个水平表单，或者如果这是不切实际的.
• 通过使用自定义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

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