Javascript 使CSS网格或flex项大小相等，中间有拉伸分隔符

我尝试构建一个动态工具栏，其中：

• 工具的数量是动态的
• 所有刀具的宽度应相同（以最宽的刀具为基础）
• 可以使用分隔符分隔工具，分隔符占用所有可用空间（拉伸）
• 分离器可以放在任何地方
• html无法更改

预期输出（给定

BBB

最宽的工具）：

-----------------------------------------------------
|A | BBB | CC |分离器| D|
—————————————————————————————————————————————————————

弯曲 我尝试了

flex

方法，但无法组合所有规则：

• 分隔符占用所有空间，但刀具宽度不相等：

-----------------------------------------------------
|A | BBB | CC |分离器| D|
—————————————————————————————————————————————————————

nav{
显示器：flex；
背景：#e8e8e8；
宽度：100%；
}
.项目{
弹性：1；
文本对齐：居中；
}
.分离器{
宽度：100%；
背景#d3；
}

A.
BBB
科科斯群岛
D

通过javascript，您可以遍历.item并查找最宽的，然后更新自定义css属性

通过js和flex的可能示例

var bigW=“0”；
对于（让e为document.queryselectoral（“导航项”））{
elW=e.offsetWidth；
如果（elW>bigW）{
bigW=elW；
}
document.documentElement.style.setProperty（“--myW”，bigW+1+“px”）；
}

nav{
显示器：flex；
背景：#e8e8e8；
宽度：100%；
}
.项目{
最小宽度：var（--myW，3em）；
文本对齐：居中；
}
.分离器{
弹性：1；
背景#d3；
}
导航俯仰+俯仰{
左边框：实心；
}

A.
BBB
科科斯群岛
D

两种解决方案（您正在展示）在宽度相同的情况下存在什么问题？感谢您提出了一个详细的问题，但我没有得到预期的输出是什么？你的代码有什么问题？为什么sperator不是由css生成的？而是制作一个htmltag@TemaniAfif分隔符应该是唯一一个宽度不相等的分隔符，这是我目前无法获得的。@MostafaHarb我无法访问html，这就是为什么我试图找到一个只使用CSS的解决方案。我认为这也是最好的JavaScript方法。我等了一会儿，看看是否有人找到一个纯CSS解决方案，否则我会验证你的答案。这是一个伟大的解决方案IMHO。一点JS就可以做到这一点。我只想补充一点，HTML分隔符是不必要的<代码>左边距：最后一项上的自动应该足够了@Michael_B同意，似乎html无法修改；）@G-Cyrillus我仍然无法在纯CSS中找到方法。我需要更改HTML（分组工具）或添加JavaScript（您的方法），以便验证您的答案。我只是使用了一个

reduce

来修改我的代码（以避免全局变量）：

Array.from（items）.reduce（（widest，el）=>Math.max（widest，el.offsetWidth），0）

@soywod您也可以将它插入if语句并在那里设置flexgrow，我相信它会允许一些分隔符：