文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS多色结合标签和输入的分割(在HTML中)

问CSS多色结合标签和输入的分割(在HTML中)
EN

Stack Overflow用户

提问于 2020-08-05 13:15:31

回答 2查看 544关注 0票数 0

我需要插入一个跨2列的多列。

由于我的最后一个表单由150+ label/input -pairs组成，而且我将从数组中获取数据，所以我需要将标签和输入分开(就像代码中的那样)。

问题: CSS中需要做的最小调整是什么，以使现有代码跨越2列以上的多列？HTML应该保持原样。

.form_content {
  display: grid;
  grid-auto-rows: auto;
  grid-auto-flow: column;
}

.form_content label {
  grid-column: 1;
}

.form_content 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>Automated creation of form</title>
</head>
<body>

</body>
</html>

<div class="form_content">

  <!-- Labels -->
  <label for="1">Label-1</label>
  <label for="2">Label-2</label>
  <label for="3">Label-3</label>
  <label for="4">Label-4</label>
  <label for="5">Label-5</label>
  <label for="6">Label-6</label>

  <!-- Input fields -->
  <input id="1" type="text" name="1" value="-">
  <input id="2" type="text" name="2" value="-">
  <input id="3" type="text" name="3" value="-">
  <input id="4" type="text" name="4" value="-">
  <input id="5" type="text" name="5" value="-">
  <input id="6" type="text" name="6" value="-">

</div>

css

css-multicolumn-layout

回答 2

Stack Overflow用户

发布于 2020-08-05 13:33:37

.form_content {
  display: grid;
  grid-template-columns: 1fr 2fr ;
  grid-auto-rows: auto;
  grid-auto-flow: column;
}
label {text-align: right; padding: .5em .3em 0 0;  }
label::after {content:' :'}

.form_content label { grid-column: 1; }
.form_content input { grid-column: 2; }

@media screen and (max-height: 20em) {
  .form_content { grid-template-columns: 1fr 2fr 1fr 2fr;}
  .form_content > label:nth-of-type(n+4) { grid-column: 3; }
  .form_content > input:nth-of-type(n+4) { grid-column: 4 }
}

/* first attempt ..
.form_content label:nth-child(odd) { grid-column: 1; }
.form_content input:nth-child(odd) { grid-column: 2; }
.form_content label:nth-child(even) { grid-column: 3; }
.form_content input:nth-child(even) { grid-column: 4; }
*/

<div class="form_content">

    <!-- Labels -->
    <label for="1">Label-1</label>
    <label for="2">Label-2</label>
    <label for="3">Label-3</label>
    <label for="4">Label-4</label>
    <label for="5">Label-5</label>
    <label for="6">Label-6</label>
  
    <!-- Input fields -->
    <input id="1" type="text" name="1" value="-1">
    <input id="2" type="text" name="2" value="-2">
    <input id="3" type="text" name="3" value="-3">
    <input id="4" type="text" name="4" value="-4">
    <input id="5" type="text" name="5" value="-5">
    <input id="6" type="text" name="6" value="-6">
  
  </div>

票数 0

Stack Overflow用户

发布于 2020-08-05 13:53:06

是你想要

.form_content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: column;
}

label {
  grid-column: 1;
}

input {
  grid-column: 2;
}

label:nth-of-type(n+4) {
  grid-column: 3;
}

input:nth-of-type(n+4) {
  grid-column: 4;
}

label {
  text-align: right;
}

label,
input {
  margin: 5px;
}

<div class="form_content">

  <!-- Labels -->
  <label for="1">Label-1</label>
  <label for="2">Label-2</label>
  <label for="3">Label-3</label>
  <label for="4">Label-4</label>
  <label for="5">Label-5</label>
  <label for="6">Label-6</label>

  <!-- Input fields -->
  <input id="1" type="text" name="1" value="-">
  <input id="2" type="text" name="2" value="-">
  <input id="3" type="text" name="3" value="-">
  <input id="4" type="text" name="4" value="-">
  <input id="5" type="text" name="5" value="-">
  <input id="6" type="text" name="6" value="-">

</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63266021

复制

相似问题

问CSS多色结合标签和输入的分割(在HTML中)
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS多色结合标签和输入的分割(在HTML中)EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS多色结合标签和输入的分割(在HTML中)
EN