根據孩子的人數調整孩子的大小

Question

我想製作一個類似於瀏覽器中的標籤的UI。

爲此，我有這個CSS元素：

width: 20%; 
max-width: 150px; 

尼斯和簡單，反應靈敏，真棒。

雖然只支持五個選項卡。如果我想要支持10個選項卡，就像更改爲width: 10%一樣簡單。

所以基本上，我想是這樣的：

width: calc(100%/number-of-children) 

如果這樣的事情是可能的，那簡直是驚人的。

我目前只是使用JavaScript來設置上述表達式的寬度。簡單，實用，但我想我會問有沒有人知道一個純CSS的解決方案。

Answer 1

與CSS3你可以使用display: flex。例如。

標記

<section> 
    <div>tab 1</div> 
    <div>tab 2</div> 
    <div>tab 3</div> 
    <div>tab 4</div> 
</section> 

的CSS

section { 
    display: flex; 
} 

div { 
    flex-grow: 1; 
    max-width: 150px; 
} 

Codepen例如：http://codepen.io/anon/pen/EGbpH/

Answer 2

display: table是你的朋友。

ul { 
    display: table; 
    width: 100%; 
} 

li { 
    display: table-cell; 
} 

Demo

Answer 3

CSS3中有一個程序叫calc（）函數，所以你可以使用

width: calc(100%/10); 

Here you can find文檔和瀏覽器支持它;）