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

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

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

Answer 2

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

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

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

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

CSS 全角列表元素

CSS full width list element

css

flexbox