I have the following li item:
<li>
<span style='float:left; background-color:red'>a</开发者_如何学Pythonspan>
<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?
Thanks
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>
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 and set filler span width to 100%. All other solutions I've tried didn't work for me as expected.
Don't float the second one, and make it display:block
.
http://jsfiddle.net/ymAt5/
You can use the grid layout:
<li class="my-grid">
<span class="left">a</span>
<span class="right">b</span>
</li>
And the css :
.my-grid {
display: grid;
grid-template-columns: max-content auto;
}
.left{
background: red;
}
.right{
background: blue;
}
Play with the grid-template-columns property so it suits your needs.
https://jsfiddle.net/c9j3ok7u/
精彩评论