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

Question

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

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

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

Stretch a list-item full width depending on the amount of items

html

css

wordpress

list

widget