css 让跨距填满剩馀长度?

yfjy0ee7  于 2022-12-05  发布在  其他
关注(0)|答案(4)|浏览(139)

我有以下李项:

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

我想让右边的span填充其父li中剩余的任何宽度。有没有办法做到这一点?
谢谢

5us2dqdw

5us2dqdw1#

您不想让每个对象都向左浮动,只想让第一个对象向左浮动,然后让第二个对象以块模式显示:

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

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%。

hm2xizp9

hm2xizp93#

不要浮动第二个,并使其成为display:block
http://jsfiddle.net/ymAt5/

zujrkrfu

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/

相关问题