我怎樣才能使n個 <li> 適合 <ul> 寬度？

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）