Question

我正在尝试使用CSS网格来设置具有三列的表单：第一列用于显示将在第二列中列出的输入标签。第三列用于获取页面上表单的正确间距，并允许表单缩放到页面大小。

我能够将表单标签和表单输入分别分为第一列和第二列，但是当我无法创建位于这两列中间的表单的新部分时，它将位于第一列{{1 }}或第二列labels。

data

.formContainer {
  display: grid;
  grid-template-columns: [labels] auto [data] auto 1fr;
  grid-auto-rows: auto;
  grid-row-gap: 5px;
  margin-top: 3%;
  margin-left: 12%;
  margin-right: 3%;
}

.formContainer>label {
  grid-column: labels;
}

.formContainer>div {
  grid-column: data;
}

.matches {
  grid-column-start: labels !important;
  grid-column-end: data !important;
}

我也尝试过将<div class='formContainer'> <label> <span>Name</span> </label> <div> <input type="text" /> </div> <div class='matches'> <div>No matches yet!</div> </div> </div> div设为不同的HTML元素，例如matches或article，但它们也不起作用。试图找出如何使这两列之间的span类跨度的任何帮助，将不胜感激。

Answer 1

根据我上面的评论，您可以在grid-column: span 2元素中使用matches使其占据两列，然后在该空间的中心添加text-align: center。

还请注意，我已经使用.formContainer > .matches而非.matches来表示样式的特异性（grid-column中的.formContainer > div定义覆盖了{{ 1}}，具体请参见grid-column）-请参见下面的演示

.matches

.formContainer {
    display: grid;
    grid-template-columns: [labels] auto [data] auto 1fr;
    grid-auto-rows: auto;
    grid-row-gap: 5px;
    grid-column-gap: 10px; /* added */
    margin-top: 3%;
    margin-left: 12%;
    margin-right: 3%;
}
.formContainer > label {
    grid-column: labels;
}
.formContainer > div {
    grid-column: data;
}
/* changed below */
.formContainer > .matches{
    grid-column: span 2;
    text-align: center;
}

CSS网格列未跨越多列

1 个答案: