Растянуть последний элемент в горизонтальном списке до оставшегося места?

Существующий код

  • 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 (без растяжения):

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

body {
  background: darkgray;
}

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

Вопрос

Как сделать так, чтобы последний элемент занимал оставшееся горизонтальное пространство?

Подробности:

  • См. Изображение ниже для желаемого результата.

  • Адаптация HTML-кода допустима, если она остается семантически ясной.

  • Решение должно работать в последней версии Firefox, последней версии Chrome и в IE8-11 (при необходимости допускается прокладка JavaScript).

Желаемый результат


layout css compass-sass
person feklee    schedule 16.11.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Это единственное решение с использованием только 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; }

Демо:

* { 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>

(Также на jsFiddle)

Он должен поддерживаться IE7 +

person drip    schedule 16.11.2013
comment
Спасибо! Последний li занимает оставшееся пространство, а input устанавливает ширину относительно элемента блока объемного звучания, которым является li. - person feklee; 16.11.2013
comment
Было бы здорово, если бы вы могли добавить в свой ответ HTML-код из скрипки. В остальном я заметил, что это неполно. - person feklee; 18.11.2013
comment
Не вижу в этом смысла, поскольку он отличается только одним классом, который может быть добавлен как статический или динамический (с js), но вопрос не в этом ... Но он добавлен ... - person drip; 18.11.2013
comment
Спасибо! Люди копируют и вставляют код. Руководства по ответам указывают на то, что целевой сайт [может быть] недоступен или [переходить] постоянно в автономный режим . - person feklee; 18.11.2013

arrow_upward
1
arrow_downward

Вы можете использовать display:table-cell (caniuse):

ul {
    width: 100%;
    background: lightgray;
}

li{
    display:table-cell;
}

ul>li:last-child, ul>li:last-child>input{
    width:100%;
}

ul>li:last-child>input{
    margin:0;
    border:0;
    background:red;
}

JSFiddle

Однако :last-child не поддерживает IE8, поэтому вам нужно настроить таргетинг на последнего дочернего элемента с помощью JavaScript или вот так.

person Vucko    schedule 16.11.2013