使用字段集和标签设置HTML表单的样式，使其具有3列布局 + - + -

问题描述

问题

问题

我应该如何设置表单的样式，以便在以下约束下获得所需的3列布局：

• 即使html文件不是静态的（复选框的动态数量，...），布局仍然有效
• 不错的浏览器支持（如果edgeHTML 15支持该解决方案，则可以加分）
• 这些字段集保留在DOM中，因为删除它们会产生副作用（单选按钮将不再分组，复选框和单选按钮将不再被禁用，...）
• 首选：无需更改html文件
• 首选：仅HTML和CSS

如果3列设计无法做到这一点，则2列设计将是可能的选择。

基础

所以基本上我有这样的形式：

<form>
  <h2>A title</h2>
  <label>
    Some text input
    <input type="text">
  </label>
  <label>
    Some more text
    <textarea></textarea>
  </label>
  <fieldset>
    <legend>Some options</legend>
    <label>
      <input type="checkbox">
      1
    </label>
    <label>
      <input type="checkbox">
      2
    </label>
    <label>
      <input type="checkbox">
      3
    </label>
  </fieldset>
</form>

，并希望获得这样的布局：

    +-----------------+------------------+------------------+
    | A title                                               |
    +-----------------+------------------+------------------+
    | Some text input | (                                 ) |
    +-----------------+------------------+------------------+
    | Some more text  | [                                 ] |
    +-----------------+------------------+------------------+
    | Some options    | [] 1             | [] 3             |
    +                 +------------------+------------------+
    |                 | [] 2             |                  |
    +-----------------+------------------+------------------+

方法

所以我想出了两种主要方法，因为我不想仅出于样式目的而更改HTML文件：

在表格上应用网格

如果我使用display: grid;为表单设置样式，并使用display: contents;为标签和字段集设置样式，则该网格中的所有元素都将具有一个网格，并且可以确定的是，没有一个单独的网格样式可以不同在大多数浏览器中，我都会遇到bug，这使内容无法访问。

+

• 所有元素只有1个网格

-

• 导致无法访问内容的错误
• 样式丢失了字段集和标签的边距
• 需要注意自定义元素，因为在此项目中，我们有很多自定义组件，它们可能会破坏布局

所以我会有类似的东西

fieldset,fieldset legend,fieldset label,fieldset input{
  border: none;
  margin: 0;
  padding: 0;
}

form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

form > h2 {
  grid-column: 1 / 4;
}

form > label,form > fieldset {
  display: contents;
}

form > label > input[type="text"],form > label > textarea {
  grid-column: 2 / 4;
}

form > fieldset label:nth-of-type(odd) {
  grid-column: 2;
}

form > fieldset label:nth-of-type(even) {
  grid-column: 3;
}

<form>
  <h2>A title</h2>
  <label>
    Some text input
    <input type="text">
  </label>
  <label>
    Some more text
    <textarea></textarea>
  </label>
  <fieldset>
    <legend>Some options</legend>
    <label>
      <input type="checkbox">
      1
    </label>
    <label>
      <input type="checkbox">
      2
    </label>
    <label>
      <input type="checkbox">
      3
    </label>
  </fieldset>
</form>

将网格应用于标签和字段集

另一方面，我尝试将网格直接应用到标签和字段集上，这样我就不必关心横跨整个列的元素，但是我遇到了bug和新的边缘浏览器，display: grid;在字段集上不起作用。如您所见，在上述代码库中，可以通过上述解决方法使所需的布局正常工作，但必须更改HTML文件。

+

• 无需关心嵌套元素
• 体面的支持

-

• 可能会表现不同的单个网格
• 仅出于样式原因，需要对HTML文件进行更改

所以我有类似的东西

fieldset,fieldset input{
  border: none;
  margin: 0;
  padding: 0;
}

form > fieldset,form > label {
  margin-top: 2 * $defaultSpacing;
}

form > fieldset,form > label {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

form > fieldset legend {
  grid-column: 1;
}

form > fieldset label:nth-of-type(odd) {
  grid-column: 2;
}

form > fieldset label:nth-of-type(even) {
  grid-column: 3;
}

form > label input[type="text"],form > label textarea,form > label * {
  grid-column: 2 / 4;
}

<form>
  <h2>A title</h2>
  <label>
    Some text input
    <input type="text">
  </label>
  <label>
    Some more text
    <textarea></textarea>
  </label>
  <fieldset>
    <legend>Some options</legend>
    <label>
      <input type="checkbox">
      1
    </label>
    <label>
      <input type="checkbox">
      2
    </label>
    <label>
      <input type="checkbox">
      3
    </label>
  </fieldset>
</form>

或解决方法：

fieldset,fieldset input{
  border: none;
  margin: 0;
  padding: 0;
}

form > fieldset .fieldset,form > label * {
  grid-column: 2 / 4;
}

<form>
  <h2>A title</h2>
  <label>
    Some text input
    <input type="text">
  </label>
  <label>
    Some more text
    <textarea></textarea>
  </label>
  <fieldset>
    <div class="fieldset">
      <legend>Some options</legend>
      <label>
        <input type="checkbox">
        1
      </label>
      <label>
        <input type="checkbox">
        2
      </label>
      <label>
        <input type="checkbox">
        3
      </label>
    </div>
  </fieldset>
</form>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）