Hãy để khoảng trống lấp đầy chiều rộng còn lại?

Question

tôi có các mục sau đây li:

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

Tôi muốn khoảng trên bên phải để lấp đầy bất cứ chiều rộng được còn lại trong li mẹ của nó. Có cách nào làm được việc này không?

Cảm ơn

Answer 1

Bạn không muốn nổi mỗi trong số họ rời đi, chỉ là người đầu tiên, và sau đó làm cho một màn hình thứ hai trong chế độ khối:

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

Answer 2

Không nổi thứ hai và làm cho nó display:block.

http://jsfiddle.net/ymAt5/

Answer 3

Nhìn cho cùng một giải pháp, nhưng chỉ tìm thấy này mà làm việc tuyệt vời cho tôi:

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

Tất cả bạn cần chỉ là sử dụng table-cell hiển thị và s et filler span width đến 100%. Tất cả các giải pháp khác mà tôi đã thử đã không làm việc cho tôi như mong đợi.