我有以下李项:
<li> <span style='float:left; background-color:red'>a</span> <span style='float:left; background-color:green'>b</span> </li>
我想让右边的span填充其父li中剩余的任何宽度。有没有办法做到这一点?谢谢
5us2dqdw1#
您不想让每个对象都向左浮动,只想让第一个对象向左浮动,然后让第二个对象以块模式显示:
<li> <span style="float:left; background-color:red">a</span> <span style="display: block; background-color:green">b</span> </li>
6tdlim6h2#
我也在寻找同样的解决方案,但只找到了一个对我来说非常有效的解决方案:
<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%。
hm2xizp93#
不要浮动第二个,并使其成为display:block。http://jsfiddle.net/ymAt5/
display:block
zujrkrfu4#
可以使用网格布局:
<li class="my-grid"> <span class="left">a</span> <span class="right">b</span> </li>
还有CSS:
.my-grid { display: grid; grid-template-columns: max-content auto; } .left{ background: red; } .right{ background: blue; }
尝试使用grid-template-columns属性,使其符合您的需要。https://jsfiddle.net/c9j3ok7u/
4条答案
按热度按时间5us2dqdw1#
您不想让每个对象都向左浮动,只想让第一个对象向左浮动,然后让第二个对象以块模式显示:
6tdlim6h2#
我也在寻找同样的解决方案,但只找到了一个对我来说非常有效的解决方案:
所有你需要的只是使用表格单元格显示和设置填充跨度宽度为100%。
hm2xizp93#
不要浮动第二个,并使其成为
display:block
。http://jsfiddle.net/ymAt5/
zujrkrfu4#
可以使用网格布局:
还有CSS:
尝试使用grid-template-columns属性,使其符合您的需要。
https://jsfiddle.net/c9j3ok7u/