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

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 单位而不是 %。