css - 使无序列表水平拉伸(stretch)以便始终填满 div

Question

很抱歉，我以为这个问题已经解决了，但后来发现并没有。

我在 div 中有一个无序列表，我希望该列表始终水平填充整个 div，无论缩放级别如何。怎么办呢？单独设置每个列表项的宽度？我试过了，我的元素的宽度加起来确实达到了 100%，但列表仍然没有填满 div。我也在修改一个模板，所以很多 HTML 对我都是隐藏的，但我可以随心所欲地编辑 CSS。在 CSS 方面我还能做什么？填充？涉及 calc 函数的东西？我已经尝试了所有这些，但不知何故似乎没有任何效果。

关于如何做到这一点，还有其他想法吗？

Answer 1

试试这个

 ul { padding:0; margin:0; white-space:nowrap; }
 li { width: 100%; list-style-type:none; display:inline-block; }

或

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

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