Geek asks and answers

Make the last item in the list of incoming lines the remaining width of the container

I am looking for a way to make the last element of a list of inline elements extend the rest of my 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 is changing, so I can not set the last list item to the specified width. I need it to fill everything that remains across the width of the navigator. How using css only?

+5
source share
1 answer

display: table ( table-cell , , Firefox, table-row) table-layout: fixed, , () , , , .
50 "", .
table-row ul table nav, Fx 18 display: table ul (-, , aka , ). ( , ) .

: 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: :last-child IE9 +, IE8 +, ...

edit: oops .last li. , :)
edit2: , :not(), :last-child pseudo

+3

More articles:


All Articles