如何制作n个<li> fit <ul>宽度？</ul> </li>

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

使用flexbox。孩子们默认会填满可用区域。

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

#tabs_header ul {
    display: flexbox;
}

#tabs_header li {
    flex: 1 1 auto;
}

Answer 2

删除float: left。当元素显示为table-cell时，不需要此声明。浮动元素收缩其内容。

Answer 3

从列表项中删除float: left;：

#tabs_header li {
    float: left;
}

fiddle1，fiddle2 - 一个工作脚本（使用jQuery）