代码之家 › 专栏 › 技术社区 › Mateja Petrovic

CSS网格:将网格列调整到最宽的列

css-grid css html javascript

Mateja Petrovic · 技术社区 · 6 年前

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 回复 | 直到 6 年前

Keith 6 年前

只需将UL的显示设置为 inline-block ..

更新了,对于水平的你可以混合(flex,inline flex)和css网格,。使用flex或inline flex类型创建包装div,。

body {
  margin: 0;
}

body * {
  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>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前