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全寬列表元素

回答

相關問題