CSS 网格 - 在 HTML 中单独分组标签和输入答案

【问题标题】：CSS grid - Group labels and input separately in HTMLCSS 网格 - 在 HTML 中单独分组标签和输入
【发布时间】：2020-11-18 16:16:03
【问题描述】：

由于需要创建 350 多对标签/输入，我希望标签和输入在 HTML 中单独分组。当标签和输入成对出现时，我使用 CSS 网格“container-1”的解决方案可以正常工作。

更新：我想单独保留标签/输入的第二个原因是因为我稍后将使用 for 循环并从导入的数组中注入数据。

问题：如何使“container-2”产生与“container-1”相同的输出，而不更改 HTML 和最小的 CSS 调整？我想坚持使用 CSS 网格。

.container_1 {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.container_2 {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="main.css">
  <title>Document</title>
</head>
<body>

<h2>container-1</h2>

  <div class='container_1'>

    <label for="dummy1">title for dummy1:</label>
    <input id="dummy1" name="dummy1" value="dummy1">
    <label for="dummy2">longer title for dummy2:</label>
    <input id="dummy2" name="dummy2" value="dummy2">
    <label for="dummy3">even longer title for dummy3:</label>
    <input id="dummy3" name="dummy3" value="dummy3">
  </div>

<br><br>

<h2>container-2</h2>

  <div class='container_2'>

    <label for="dummy1">title for dummy1:</label>
    <label for="dummy2">longer title for dummy2:</label>
    <label for="dummy3">even longer title for dummy3:</label>

    <input id="dummy1" name="dummy1" value="dummy1">
    <input id="dummy2" name="dummy2" value="dummy2">
    <input id="dummy3" name="dummy3" value="dummy3">
  </div>

</body>
</html>

【问题讨论】：

是否需要容器 2 的外观与容器 1 相同？
@sergeykuznetsov 是的，同样的输出。
是否对两个容器应用相同的 CSS 规则不起作用？
@FluffyKitten 不，它不起作用，请参阅代码 sn-p。
这对于网格来说并不完全正确。这就是网格布局的原理。您将按照放置它们的确切顺序查看它们。

标签： html css css-grid css-tables

【解决方案1】：

给你。更改了第二个容器的grid-auto-flow 以改变方向。 HTML 没有变化。

尽管在这里您必须确定grid-column 中的label 和input。

.container_1 {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.container_2 {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-auto-rows: auto;
  grid-auto-flow: column;
}

.container_2 label {
  grid-column: 1;
}

.container_2 input {
  grid-column: 2;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="main.css">
  <title>Document</title>
</head>
<body>

<h2>container-1</h2>

  <div class='container_1'>

    <label for="dummy1">title for dummy1:</label>
    <input id="dummy1" name="dummy1" value="dummy1">
    <label for="dummy2">longer title for dummy2:</label>
    <input id="dummy2" name="dummy2" value="dummy2">
    <label for="dummy3">even longer title for dummy3:</label>
    <input id="dummy3" name="dummy3" value="dummy3">
  </div>

<br><br>

<h2>container-2</h2>

  <div class='container_2'>

    <label for="dummy1">title for dummy1:</label>
    <label for="dummy2">longer title for dummy2:</label>
    <label for="dummy3">even longer title for dummy3:</label>

    <input id="dummy1" name="dummy1" value="dummy1">
    <input id="dummy2" name="dummy2" value="dummy2">
    <input id="dummy3" name="dummy3" value="dummy3">
  </div>

</body>
</html>

【讨论】：

不错的解决方案，但是如果您可以像在第一个容器中一样将元素放入第二个容器中，那么折磨自己又有什么意义呢:))
就像问题的作者所说“由于需要创建 350+ 对标签/输入，我希望标签和输入在 HTML 中单独分组。我想的第二个原因单独保留标签/输入是因为我稍后将使用 for 循环并从导入的数组中注入数据。”问题是要分别保留标签和输入。我同意，但问题的作者 - 不）
-澄清一下，问题的全部目的是保持标签和输入分开并分组以供以后的for循环处理。第一个容器目的只是我可以实现的参考，同时第二个容器是要根据上述要求/需要进行更新的容器。
我会记下您的布局。派上用场。

【解决方案2】：

.container_1 {/* Your HTML for bottom and top just needs to be the same*/
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.container_2 {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="main.css">
  <title>Document</title>
</head>
<body>

<h2>container-1</h2>

  <div class='container_1'>

    <label for="dummy1">title for dummy1:</label>
    <input id="dummy1" name="dummy1" value="dummy1">
    <label for="dummy2">longer title for dummy2:</label>
    <input id="dummy2" name="dummy2" value="dummy2">
    <label for="dummy3">even longer title for dummy3:</label>
    <input id="dummy3" name="dummy3" value="dummy3">
  </div>

<br><br>

<h2>container-2</h2>

  <div class='container_2'>
      <label for="dummy1">title for dummy1:</label>
      <input id="dummy1" name="dummy1" value="dummy1">
      <label for="dummy2">longer title for dummy2:</label>
      <input id="dummy2" name="dummy2" value="dummy2">
      <label for="dummy3">even longer title for dummy3:</label>
      <input id="dummy3" name="dummy3" value="dummy3">
  </div>

</body>
</html>

【讨论】：