由于标签较长，表单中的字段显示方式不同答案

【问题标题】：Fields in Form display in differently because of long label由于标签较长，表单中的字段显示方式不同
【发布时间】：2022-10-15 03:05:29
【问题描述】：

我正在尽我所能来对齐这些字段。

在较宽的屏幕上，它的显示还可以，但在较小的屏幕上，标签会变得太长，从而影响字段的对齐方式。

目前它看起来像这样：

如果屏幕不够宽，我打算让它们像这样显示：

到目前为止我的代码：

.column-50, .column-100 {
   float: left
}

.column-50 {
   width: 50%
}
.marginbottom-4 {
   margin-bottom: 1.2em
}

<div class="column-100 marginbottom-4">
  <div class="column-50" style="padding: 0 0.2em">
    <div>
      <label>LABEL HERE</label>
      <input type="text">
    </div>
  </div>
  <div class="column-50" style="padding: 0 0.2em">
    <div>
      <label>LONG LABEL GOES HERE</label>
      <input type="text">
    </div>
  </div>
</div>

已经尝试过使用填充、垂直对齐、对齐内容，但也许我做错了？

【问题讨论】：

请编辑您的问题并使用 sn-p 选项创建可运行的代码 sn-ps，以便回答者可以运行和复制您的 sn-ps 并提供答案。
你的 CSS 在哪里？始终在 sn-p 中发布完整的可执行代码。

标签： html css

【解决方案1】：

一种解决方案可能是使用表格

<table style="width: 100px;">
  <tr>
    <td>LABEL HERE</td>
    <td>LONG LABEL GOES HERE</td>
    
  </tr>
  <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
</table>

【讨论】：

【解决方案2】：

您可以使用flexbox 并使用align-items: end; 在底部对齐您的项目

您可以使用这个 css 属性进行更多操作，例如 center 、 start 等：align-items

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: end;
  width: 250px;
}

<div class="wrapper">
      <div>
      <label>LABEL HERE</label>
      <input type="text">
    </div>
        <div>
      <label>LONG LABEL GOES HERE</label>
      <input type="text">
    </div>
  </div>

【讨论】：