如何在不知道标签最大宽度的情况下设计具有垂直对齐字段的响应式表单？

Question

我必须设计一个类似于这个的表格：

您看到的表单是使用表格设计的：每个标签和每个输入字段都包含在<td> 中，棕色分隔符（例如“图片”）是<tr>，只有一个（“colspanned”）细胞。

我想让这个表单响应，我需要的只是一个流畅的布局，根据屏幕宽度：

1. 将标签放在其输入字段上方（而不是左侧）
2. 将字段放在一个下方（一行，一个字段）

我使用 <div> 而不是表格重新设计了表单，并且我设法使用类似的东西得到了我想要的东西

label{
    float:left;
}

@media (max-width: 600px) {
    label{
        display:block;
    }
}

问题是字段没有像原始表单那样垂直对齐。我在 stackoverflow 上看到了几个关于如何在不使用表格的情况下垂直对齐表单字段的示例，但它们都需要知道标签的最大宽度。我不知道，表单是根据数据库的架构动态生成的，还有字段的数量以及用户希望如何在表单中分配它们（例如，第一行中的一个，第二行中的两个，. ..) 是我事先不知道的。

我还尝试使用 display:table-cell 方法，就像这里解释的那样：is such alignment achievable without <table>? 和这里 https://softwareengineering.stackexchange.com/questions/277778/why-are-people-making-tables-with-divs 但我最终无法让表单按照我的意愿做出响应。

我也很乐意保留表格布局，不需要迁移到 <div> 设计，但如果我保留基于表格的设计，我不知道如何使用 CSS 媒体规则使表单具有响应性.

总结一下：如果可以的话，基于表格和基于 div 的设计都适合我

1. 响应式表单（我无法使用基于表格的设计获得它）
2. 垂直对齐的字段（我无法使用基于 div 的设计获得它）

Answer 1

您可以将 CSS 规则添加到您想要使用的 HTML 表单元素中。

如果您在 div 元素中有一个表单元素，您可以简单地设置表单元素的宽度以使其具有响应性。

HTML：

<div>
  <form>
    <input type="text" name="firstname" placeholder="First name">
    <input type="text" name="lastname" placeholder="Last name">
  </form>
</div> 

CSS：

div {
  width: 100%;
}

div input {
  min-width: 80%;
}

*为了更好的实践，最好使用 vh、vw 单位而不是 %。