根据项目数量

Question

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

整个事情是在WordPress中创建的，添加的列表项是小部件 所以这就是我所拥有的： Fiddle

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

希望它有意义。

微米。

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>