CSS 让跨度填充剩余宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3499314/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Let span fill remaining width?
提问by user246114
I have the following li item:
我有以下 li 项目：
<li>
<span style='float:left; background-color:red'>a</span>
<span style='float:left; background-color:green'>b</span>
</li>
I'd like the span on the right to fill whatever width is remaining in its parent li. Is there a way to do that?
我希望右侧的跨度填充其父 li 中剩余的任何宽度。有没有办法做到这一点？
Thanks
谢谢
采纳答案by Michael Shimmins
You don't want to float each of them left, only the first one, and then make the second one display in block mode:
您不想将它们中的每一个都向左浮动，只有第一个，然后使第二个以块模式显示：
<li>
<span style='float:left; background-color:red'>a</span>
<span style="display: block; background-color:green;">b</span>
</li>
回答by Fallen Flint
Looked for the same solution, but found only this which worked great for me:
寻找相同的解决方案，但发现只有这个对我有用：
<li>
<span style='display: table-cell; background-color:red'>a</span>
<span style='display: table-cell; width: 100%; background-color:green'>b</span>
</li>
All you need is just using table-cell displaying andset filler span width to 100%. All other solutions I've tried didn't work for me as expected.
您所需要的只是使用表格单元格显示并将填充跨度宽度设置为 100%。我尝试过的所有其他解决方案都没有按预期对我有用。
回答by cnanney
Don't float the second one, and make it display:block.
不要浮动第二个，并让它display:block。
