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