CSS全宽列表元素

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;
}

为确保文档边缘与菜单项之间没有间隙，请在ul元素中添加padding：0。

小提琴 - http://jsfiddle.net/komy44x1/1/

Answer 2

你几乎是他们的，将flex-grow:添加到li元素。

＆＃13;

＆＃13;

ul {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}
li {
    flex-grow: 1;
    padding: 10px 0;
    list-style: none;
    text-align: center;
}

＆＃13;

<ul>
	<li>menu item #1</li>
	<li>menu item #2</li>
	<li>menu item #3</li>
	<li>menu item #4</li>
	<li>menu item #5</li>
	<li>menu item #6</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

在此处阅读有关flex的更多信息https://css-tricks.com/snippets/css/a-guide-to-flexbox/