Question

我想创建一个表单，每行有一个行号，每行有几个表单字段。如果字段不适合一行，则它们应换行换行，而行号则保留在行的顶部。以下是此表单的说明：

（深蓝色线描述显式网格区域，浅蓝色线隐含不同表格字段的网格区域。）

我知道CSS Grid Layout旨在解决这样的用例，虽然我不清楚如何使用它生成上面提到的表单。

到目前为止我尝试的是：

HTML：

<div class="form">
  <div class="row">
    <div class="lineNumber">1</div>
    <label for="field1">Field 1 <input id="field1"/></label>
    <label for="field2">Field 2 <input id="field2"/></label>
    <label for="field3">Field 3 <input id="field3"/></label>
  </div>
  <div class="row">
    <div class="lineNumber">2</div>
    <label for="field1">Field 4 <input id="field1"/></label>
  </div>
</div>

CSS：

.row {
  display: grid;
  grid-template-columns: 50px 1fr 1fr;
  grid-auto-rows: 30px;
}

.row > * {
  padding: 4px;
}

.lineNumber {
  grid-row-end: line-number span;
}

我还没有得到，我怎样才能让行号列跨越行的整个高度，而其他列在行之间换行。我假设必须可以使用line-number定义grid-template-rows命名区域。虽然如何？

编辑：

我知道可以使用display: table-row; / display: table-cell;，但我的主要目的是使用 CSS网格布局来实现这一点。

Answer 1

您可以使用display:table/table-cell来实现您的目标

段

＆＃13;

*,
*:before,
*:after {
  box-sizing: border-box;
}
.form {
  display: table;
  table-layout: fixed;
  width: 100%;
  border: 1px solid #000;
}
.row {
  display: table-row
}
.lineNumber,
.fields {
  display: table-cell;
  vertical-align: top;
  padding: 10px 0;
}
.lineNumber {
  border: 1px solid #000;
  border-width: 0 1px 1px 0;
  width: 20px;
  text-align: center
}
.fields {
  border-bottom: 1px solid #000;
  /*fix inline-block gap*/
  font-size: 0
}
label {
  padding: 0 10px;
  /*whatever you want */
  font-size: 16px;
}
.row:first-of-type label {
  width: 50%;
  display: inline-block
}
.row:first-of-type label:not(:last-of-type) {
  border-bottom: 1px solid red;
  padding-bottom: 10px
}
.row:first-of-type label:last-of-type {
  margin-top: 10px
}
.row:last-of-type .lineNumber,
.row:last-of-type .fields {
  border-bottom: 0
}

＆＃13;

<div class="form">
  <div class="row">
    <div class="lineNumber">1</div>
    <div class="fields">
      <label for="field1">Field 1
        <input id="field1" />
      </label>
      <label for="field2">Field 2
        <input id="field2" />
      </label>
      <label for="field3">Field 3
        <input id="field3" />
      </label>
    </div>
  </div>
  <div class="row">
    <div class="lineNumber">2</div>
    <div class="fields">
      <label for="field1">Field 4
        <input id="field1" />
      </label>
    </div>
  </div>
</div>

＆＃13;

Answer 2

在我看来，css counters应该符合您的问题

＆＃13;

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css";
form {
  counter-reset: form;  
  border: 2px solid cyan;
}

fieldset { 
  position: relative;
  display: block;
  padding: 1em 1em 1em 3em !important;
  border-bottom: 2px solid cyan;
}

fieldset::before {
  counter-increment: form;
  content: counter(form);
  position: absolute;
  left: 5px;
  top: 5px;
  font-weight: bolder;
}
.sp-b { margin-bottom: 1em }

＆＃13;

<form>
  <fieldset>
    <div class="row">
      <div class="col-xs-6 sp-b"><input type="text" class="form-control"></div>
      
      <div class="col-xs-6"><input type="text" class="form-control"></div>
    </div>
    <div class="row">
      <div class="col-xs-12"><input type="text" class="form-control"></div>
    </div>
  </fieldset>
  <fieldset>
    <div class="row">
      <div class="col-xs-12"><input type="text" class="form-control"></div>
    </div>
  </fieldset>
  <fieldset>
    <div class="row">
      <div class="col-xs-12"><input type="text" class="form-control"></div>
    </div>
  </fieldset>
  <fieldset>
    <div class="row">
      <div class="col-xs-12"><input type="text" class="form-control"></div>
    </div>
  </fieldset>
</form>

＆＃13;

如何使用CSS网格布局使用行号设置表单样式？

2 个答案:

段