html - 如何让 n 个 适合 宽度？

Question

我正在尝试让所有 li 的宽度与我的 ul 的宽度相匹配，这是我的代码: http://jsfiddle.net/4XR5V/2/

我已经在网站上看到了一些问题，有些似乎可以添加

ul {
  width: 100%;
  display: table;
  table-layout: fixed; /* optional */
}

ul li {
  display: table-cell;
  width: auto;
  text-align: center;
}

但是没有成功。我的 javascript 函数有效，我不知道为什么在 jsfiddle 中它不起作用。我该如何解决这个问题？

谢谢!!

Answer 1

使用 flex 盒子。默认情况下， children 将填满可用区域。

http://jsfiddle.net/4XR5V/3/

#tabs_header ul {
    display: flexbox;
}

#tabs_header li {
    flex: 1 1 auto;
}