CSS全宽列表元素

我正在创建一个菜单，并试图使用全宽菜单，只使用CSS。但是，我不确定菜单项如何显示在菜单中。CSS全宽列表元素

这是问题的一个截图：

的问题是，在“GAP”，我得到。

如果我有固定的项目数，我知道我可以用这样的逻辑：

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

有没有一种方法，只要使用CSS，使这个？

谢谢！

来源

2015-12-02 bla0009

为什么不创建的jsfiddle更好地帮助你吗？ – Muhammad

你是如何制作菜单的？使用水平列表？有没有可以提供的示例代码？ – shrmn

试过'width：100％'？ –

是的，使用flexbox。

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

li { 
    flex-grow: 1; 
}

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

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

来源

2015-12-02 09:31:36 Edd

你几乎是他们，加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> 
 
\t <li>menu item #1</li> 
 
\t <li>menu item #2</li> 
 
\t <li>menu item #3</li> 
 
\t <li>menu item #4</li> 
 
\t <li>menu item #5</li> 
 
\t <li>menu item #6</li> 
 
</ul>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

来源

2015-12-02 09:35:32 Aaron

CSS全宽列表元素

回答

相关问题