Пусть span заполнит оставшуюся ширину?

Question

У меня есть следующий элемент li:

<li>
  <span style='float:left; background-color:red'>a</span>
  <span style='float:left; background-color:green'>b</span>
</li>

Я бы хотел, чтобы интервал справа заполнил всю ширину, оставшуюся в родительском li. Есть ли способ сделать это?

Спасибо

Answer 1

Вы не хотите плавать каждый из них слева, только первый, а затем отображать второй в режиме блокировки:

<li>
  <span style='float:left; background-color:red'>a</span>
  <span style="display: block; background-color:green;">b</span>
</li>

Answer 2

Искал то же решение, но нашел только то, что отлично сработало для меня:

<li>
  <span style='display: table-cell; background-color:red'>a</span>
  <span style='display: table-cell; width: 100%; background-color:green'>b</span>
</li>

Все, что вам нужно, это просто использовать отображение ячейки таблицы и установить ширину диапазона заполнителя100%.Все другие решения, которые я пробовал, не сработали для меня, как ожидалось.

Answer 3

Не плавайте второй, и сделайте его display:block.

http://jsfiddle.net/ymAt5/