auto expand and space out li items

Question

So, let's say I have a div that's 780px wide, with 6 list items in it.

These list items can range anywhere from 10px to 130px wide.

I'd like for the list items to use up the entire 780px and space them out evenly with margin (automatically of course).

I've tried table, but it didn't keep the list items original width.

html

<ul class="foo">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
</ul>

css

.foo{
  display:table;
  table-layout:fixed;
}
.foo li{
  padding:5px;
  display:table-cell;
}

This is a `flexbox` solution. http://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Josh Burgess, Nov 26 '14 at 18:10
Consider CSS3 'box-sizing' which includes margin and padding - there is a similar question here http://stackoverflow.com/questions/2434602/css-setting-width-height-as-percentage-minus-pixels You can see browser support here http://caniuse.com/#feat=css3-boxsizing — jan199674, Nov 26 '14 at 19:22

score 3 · Accepted Answer · 2014-11-26T22:44:53.797

3

What you're looking for is to set them as display: flex; for the unordered list.

ul.foo { 
    display: flex;
}

ul.foo li { 
    display: inline-block;
    flex: 1;
    text-align: center;
}

<ul class="foo">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
</ul>

edited Nov 26 '14 at 22:44

answered Nov 26 '14 at 22:38

score 0 · Answer 2 · answered Nov 26 '14 at 22:53

There's always the old school method as well, outlined below. But flex support is gaining (http://caniuse.com/#search=flex)! So if you can go that route, that's the one I'd choose.

ul.foo {
  width: 780px;
  margin: 0;
  padding: 0;
  list-style: none outside;
}

ul.foo li {
  width: 16.66%;
  float: left;
  outline: 1px solid green;
}

<ul class="foo">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
</ul>

auto expand and space out li items

2 Answers2