根据孩子的数量调整孩子的大小

Question

我想创建一个与浏览器中的标签类似的用户界面。

为此，我有这个CSS的元素：

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

美观，简单，反应灵敏。

但仅支持五个标签。如果我想支持10个标签，只需更改为width: 10%。

所以基本上，我想要这样的东西：

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

如果这样的事情成真，那就太棒了。

我目前只是使用JavaScript将宽度设置为上面的表达式。简单，实用，但我想我是否有人知道只有CSS的解决方案。

Answer 1

CSS3您可以使用display: flex。 E.g。

标记

<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文档和哪个浏览器支持它;）