Question

<div>
    <i>O</i>
    <input type="range" />
    <button/>
    <div>...</div>
</div>

我在div中有一个范围滑块，其中包含其他各种元素。此div中的所有其他元素都是固定宽度。

目前，范围滑块设置为百分比宽度，随着页面分辨率的增加，该宽度会缩放，但会留下越来越大的余量;范围滑块应占用div中剩余的所有可用空间，同时将其他元素保留在它们所在的位置。

我想知道是否有任何纯粹的css / html方式来实现这一目标。

Answer 1

您可以为播放栏中的每个元素添加display flex。然后使用

flex-grow:1;

滑块上的

。

适用于Firefox。

flex的问题在于它仅在最现代的浏览器中受支持。而且您必须使用供应商前缀才能使其全面运行。

-webkit-flex：1; / * Safari 6.1+ * /

-ms-flex：1; / * IE 10 * /