Search code examples
csslayoutcompass-sass

Make last element in horizontal list stretch to remaining space?

Existing code

  • index.html:

    <!DOCTYPE html>
<head>
  <title>Test</title>
  <link href="stylesheets/index.css" rel="stylesheet"
        type="text/css" />
</head>
<ul>
  <li>Foo</li>
  <li>Bar</li>
  <li><input /></li>
</ul>

  • index.scss (without stretching):

    @import "compass/reset";
@import "compass/typography/lists/horizontal-list";

body {
  background: darkgray;
}

ul {
  width: 100%;
  background: lightgray;
  @include horizontal-list;
}

Question

What is an elegant way to make the last element take up the remaining horizontal space?

Details:

  • See image below for desired output.

  • Adaption of HTML code is OK, as long as it remains semantically clear.

  • The solution should work in the latest Firefox, in the latest Chrome, and in IE8-11 (JavaScript shim, if needed, is acceptable).

Desired output

Solution

  • This one solution with only css.

    HTML:

    <ul>
  <li>Foo</li>
  <li>Bar</li>
  <li class="last"><input type="text" /></li>
</ul>

    CSS:

    ul li { float: left; list-style: none; }
ul li.last { float: none; display: block; overflow: hidden; }
ul li input { width: 100%; border: 0; box-shadow: inset 0 0 1px #000; }

    Demo:

    * { margin: 0; padding: 0; }
ul li { float: left; list-style: none; }
ul li.last { float: none; display: block; overflow: hidden; }
ul li input { width: 100%; border: 0; box-shadow: inset 0 0 1px #000; }
    <ul>
  <li>Foo</li>
  <li>Bar</li>
    <li class="last"><input type="text" /></li>
</ul>

    (Also on jsFiddle)

    It should be supported by IE7+