CSS многоколонка в сочетании с разделением метки и ввода (в HTML) - PullRequest
Новая
       2

CSS многоколонка в сочетании с разделением метки и ввода (в HTML)

0 голосов
/ 05 августа 2020
• 1000 метка и ввод разделены в HTML (как есть в коде).

Вопрос: Какая минимальная корректировка в 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>

Ответы [ 2 ]

0 голосов
/ 05 августа 2020

Это то, что вы хотите 

.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 голосов
/ 05 августа 2020

это ? 

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...