根据项目的数量拉伸列表项的全宽

Question

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

整个东西都是在 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>