CSS 全 Angular 列表元素

Question

我正在创建一个菜单并尝试使用 CSS 制作全宽菜单。但是，我不确定菜单项将如何出现在菜单中。

这是问题的截图:

问题出在我得到的“GAP”中。

如果我有固定数量的元素，我知道我可以使用这个逻辑:

ul {
    display: flex;
    justify-content: center;
}
li {
    padding: 10px 60px;
}

有没有办法只使用 CSS 来做到这一点？

谢谢!

Answer 1

是的，使用 flexbox。

保留 ul 的代码并简单地将 flex-grow: 1 添加到列表中。

li {
  flex-grow: 1;
}

为确保文档边缘和菜单项之间没有间隙，请将 padding: 0 添加到 ul 元素。

fiddle - http://jsfiddle.net/komy44x1/1/