CSS网格:使网格列适应最宽的列
CSS网格:使网格列适应最宽的列
提问于 2018-08-10 05:39:33
const items = Array.from(column.children)
const widths = items.map(item => item.offsetWidth)
const widest = widths.reduce((widest, current) => widest > current ? widest : current, 0)
items.map(item => item.style.width = `${widest}px`)body {
margin: 0;
}
body * {
font-family: Helvetica;
}
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
}
#column {
grid-auto-columns: max-content;
grid-auto-flow: column;
}
li {
text-align: center;
padding: 10px 10px;
color: lightcyan;
background: lightseagreen;
border-right: 2px solid lightcyan;
}<ul id="column">
<li>S</li>
<li>Med</li>
<li>Widest Item</li>
</ul>
我用一点javascript使列表项适合列表中最大的项。如何仅使用CSS来完成此任务？
这也可以从网格中行的角度来看。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-10 05:45:39
将UL的显示设置为inline-block。对于水平，你可以将( flex，inline-flex)与css-grid混合使用，使用flex或inline-flex类型创建一个包装器div。
body {
margin: 0;
font-family: Helvetica;
}
div {
display: inline-flex;
}
ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
li {
text-align: center;
padding: 10px 10px;
color: lightcyan;
background: lightseagreen;
border-right: 2px solid lightcyan;
}<div>
<ul id="column">
<li>S</li>
<li>Med</li>
<li>Widest Item</li>
</ul>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51776130
复制相关文章
相似问题