让span填充剩余宽度？

Question

我有以下项目：

<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/