CSS -任何未设置宽度的跨度取余数

Question

如果我输入:

<div style="width: 100%">
   <span style="width: 5%">5% Width</span>
   ... (some more here)
   <span>Fill the leftover</span>
   ... (more span with width given)
   <span style="width: 5%">5% Width</span>
</div>

是否有一种方法，span(放置在列表的任何地方)可以填补剩下的宽度?

Answer 1

您应该使用table and table-cell的显示属性来这样做:

<div style="width: 100%; display:table;">
   <span style="width: 5%; display:table-cell;">5% Width</span>
     ... (some more here)
   <span style='display:table-cell;'>Fill the leftover</span>
    ... (more span with width given)
   <span style="width: 5%; display:table-cell;">5% Width</span>
</div>