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

1 Views

I have a footer where dynamically list-items can be added.
I would like to have the list-item stretch themselves over the given width of their container.

The whole thing is created in WordPress and the added list-items are widgets.
So this is what I have:
Fiddle

Read More

I can’t give a single .widget a width of a certain percentage because this is determined by the amount of list-items displayed.

Hope it makes sense.

M.

Post Views: 1

Related posts

1 comment

  1. One option is to use 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>

    Other one is CSS Tables

    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>

Comments are closed.