我需要使用网格,但我的列不是网格的直接子级。网格有两列:
- 第 1 列包含标签。
- 第 2 列包含输入框。
标签列应与最大列一样大(但不大)。输入列应使用所有剩余空间。我尝试了以下CSS/HTML组合。
* {
border: 1px solid black;
background: #2222;
}
.container {
display: grid;
width: 550px;
grid-gap: 10px;
grid-template-rows: [a] auto [b] auto [c] auto;
grid-template-columns: [label] auto [input] 1fr;
align-items: stretch;
}
label { grid-column-start: label; }
input { grid-column-start: input; }
.a { grid-row-start: a; }
.b { grid-row-start: b; }
.c { grid-row-start: c; }
<div class="container">
<div class="a">
<label>A</label>
<input>
</div>
<div class="b">
<label>Label B</label>
<input>
</div>
<div class="c">
<label>Longest C label</label>
<input>
</div>
</div>
我知道没有使用grid-column-start
,因为这些元素不是网格的直接子元素。但是,如何在不对标签宽度进行硬编码或使用 Javascript 的情况下完成此功能呢?
使用多个网格(每行一个)会很好,但我需要同步第一列的宽度。我已经阅读了有关子网格的信息,但尚未由任何主要浏览器实现。我还有其他选择来解决这个问题吗?
这似乎比CSS网格更适合表格布局:
* {
box-sizing:border-box;
}
.container {
display: table;
width: 550px;
border:1px solid;
}
.container>div {
display: table-row;
}
label,
input {
display: table-cell;
border:1px solid green;
}
label {
width:5%; /*a small value*/
white-space:nowrap;
}
input {
width:100%;
}
<div class="container">
<div class="a">
<label>A</label>
<input>
</div>
<div class="b">
<label>Label B</label>
<input>
</div>
<div class="c">
<label>Longest C label</label>
<input>
</div>
</div>
如果浏览器支持对您来说足够了,则可以display: contents
从渲染中"排除"包装器元素并仅显示其内容(类似于display: none
,任何其他属性都不会出现在父元素上(如背景,边距,填充等),但它将使子元素保持游戏) ->子元素将使用父元素的网格布局引用来对齐自己。
* {
border: 1px solid black;
background: #2222;
}
.container {
display: grid;
width: 550px;
grid-gap: 10px;
grid-template-rows: [a] auto [b] auto [c] auto;
grid-template-columns: [label] auto [input] 1fr;
align-items: stretch;
}
label { grid-column-start: label; }
input { grid-column-start: input; }
.a { grid-row-start: a; display: contents; }
.b { grid-row-start: b; display: contents; }
.c { grid-row-start: c; display: contents; }
<div class="container">
<div class="a">
<label>A</label>
<input>
</div>
<div class="b">
<label>Label B</label>
<input>
</div>
<div class="c">
<label>Longest C label</label>
<input>
</div>
</div>