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

本文介绍了CSS网格-在HTML中单独分组标签和输入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

由于需要创建350多对标签/输入，我希望将标签和输入分别用HTML分组.我对CSS网格"container-1"具有的解决方案标签和输入成对使用时，效果很好.

Due to need of creating 350+ pair of label/input, I would like to have the label and input grouped separately in HTML. The solution I have with CSS grid "container-1" works fine when the label and input comes in pairs.

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

Update: The second reason I would like to keep label/input separately is because I will later use a for-loop and inject data from imported array.

问题:如何制作"container-2"?结果产生与"container-1"相同的输出.是否没有HTML更改和CSS的最小调整?我想坚持使用CSS网格.

Question: How can I make "container-2" result in same output as "container-1" with no changes of HTML and minimal adjustment of CSS ?I want to stick to CSS grid.

.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>

推荐答案

在这里.更改了网格自动流第二个容器改变方向.HTML不变.

Here you go. Changed grid-auto-flow of the second container to change the direction. No changes in HTML.

在这里，您必须确定网格列 label 和 input 的a>.

Althought here you have to determine grid-column of label and 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>

这篇关于CSS网格-在HTML中单独分组标签和输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！