根据项目数量

时间:2016-01-07 11:07:54

标签: html css wordpress list widget

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

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

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

希望它有意义。

微米。

1 个答案:

答案 0 :(得分: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>