0

我在我正在处理的项目中使用 美国网页设计系统（USWDS） ，我正在努力解决表面上看起来应该很简单的事情：如何对齐表单标签，使它们出现在左侧他们相应的输入，而不是在他们之上？

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

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

任何人都可以帮助我：

  • 使用 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>

4

1 回答 1

1

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

于 2021-03-05T13:15:39.307 回答