CODEWITHSUNDEEP
csslist
Pollux Khafra
Pollux Khafra

Reputation: 862

Make the last inline list item extend remaining width of container

I'm looking for a way to make the last inline list item extend the remainder of its container. So I have something like this.

<nav>
  <ul>
     <li></li> //width = 50px
     <li></li> //width = 50px
     <li class="last"></li> //width needs to fill the remaining 300px
  </ul>
</nav>

nav {
  width:400px;
  height:50px;
}
nav > ul > li {
  display:inline-block;
  padding:5px;
}

Now the number of list items varies so I can't set the last list item to a set width. I need to make it fill whatever is left over in the width of the nav. How to with using css only?

Upvotes: 5

Views: 3392

Answers (2)

Sam Newport
Sam Newport

Reputation: 21

Update for 2019 :

ul { 
    display: flex;
}
ul li:last-child {
    flex: 1; 
}

Upvotes: 2

FelipeAls
FelipeAls

Reputation: 22161

You can use display: table (and table-cell and, at least for Firefox, table-row) with table-layout: fixed to get the table algorithm where indicated widths by the author (you) are applied by the browser and not the other way where the browser do its best to adapt the width of cells to their content.
Then applying a width of 50px to all "cells" except the last one.
I used table-row on ul and table on its nav parent because on Fx 18 setting display: table on ul didn't have the expected effect (something related to the browser having to create the missing parts a.k.a. a shadow element acting as row in-between). Being very descriptive (this element must be rendered as a table and this one as a row and these ones as cells) helps.

Fiddle here: http://jsfiddle.net/X6UX9/1/

HTML:

<nav>
  <ul>
     <li> //width = 50px</li>
     <li>//width = 50px</li>
     <li class="last">//width (...) 300px</li>
  </ul>
</nav>

CSS:

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
nav {
    display: table;
    table-layout: fixed;
    width:400px;
    height:50px;
}
nav > ul {
        display: table-row;
}
nav li {
    display: table-cell;
    padding:5px;
    outline: 1px dashed blue;
}
nav li:not(:last-child) {
    width: 50px;
}

PS: using :last-child for setting widths is compatible with IE9+, not IE8+ as I stated in the fiddle...

edit: oops I didn't see your .last class on last li. Well, you get the idea :)
edit2: updated fiddle using this class and neither :not() nor :last-child pseudo

Upvotes: 4

Related Questions