html - 根据元素的数量拉伸(stretch)列表元素的全宽

Question

我有一个页脚，可以在其中动态添加列表项。
我想让列表项在其容器的给定宽度上拉伸(stretch)。

整个东西都是在 WordPress 中创建的，添加的列表项是小部件。
所以这就是我所拥有的: Fiddle

我不能给单个 .widget 一定百分比的宽度，因为这取决于显示的列表项的数量。

希望它有意义。

M.

Answer 1

一种选择是使用Flexbox

ul{
  background:#000;
  display: flex;
  flex-direction: row;
  padding-left: 0;
}

li.widget{
   flex: 1;
   background:#FFF;
   text-align: center;
}

<ul>
  <li class="widget">ITEM 1</li>
  <li class="widget">ITEM 2</li>
</ul>

另一个是 CSS 表格

ul{
  background:#000;
  display: table;
  padding-left: 0;
  width: 100%;
}

li.widget{
   background:#FFF;
   text-align: center;
   display: table-cell;
}

<ul>
  <li class="widget">ITEM 1</li>
  <li class="widget">ITEM 2</li>
</ul>