CODEWITHSUNDEEP
css
Mathew
Mathew

Reputation: 117

auto expand and space out li items

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;
}

Upvotes: 1

Views: 1481

Answers (2)

Bill Keller
Bill Keller

Reputation: 833

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>

Upvotes: 0

user4297834
user4297834

Reputation:

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>

Upvotes: 3

Related Questions