CSS网格-在HTML中单独分组标签和输入 [英] CSS grid - Group labels and input separately in 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中单独分组标签和输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
