css - 使列表中的最后一项填充容器的其余部分

Question

我有一个包含未知宽度元素的内联列表，我希望最后一项的背景颜色与其余项不同，并占据右侧所有剩余空间。

我正在使用给定的 HTML，但我无法修改它，所以我正在寻找一种仅使用 CSS 的方法(我认为我也不能使用 JS)。我做了一个simplified fiddle为了显示我需要的内容，最后一项的背景应该一直到浏览器窗口的末尾(向右)。

例如，我的 HTML:

<div>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li class="last">item 4</li>
    </ul>
</div>

对于 CSS，我尝试了:

background: linear-gradient(to right, #fff 70%, red 30%);

在 div 上，但由于网站必须响应，百分比并不能真正满足我的需要，它们要么没有覆盖足够多，要么随着屏幕尺寸的变化与前面的元素重叠。

是否有另一种 CSS 方式来做到这一点？

Answer 1

这是一种结合使用 CSS 表格、伪元素和绝对定位的方法。

对于以下 HTML:

<div>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li class="last">item 4</li>
    </ul>
</div>

应用以下 CSS:

div {
    border: 1px dotted gray;
    position: relative;
    overflow: hidden;
}
div ul {
    display: table;
    margin: 0 auto;
    padding: 0;
}
div ul li {
    padding: 10px;
    margin: 0;
    display: table-cell;
    list-style-type: none;
    border: 1px dashed blue;
}
div ul li.last {
}
div ul li.last:before {
    content: '\a0'; /* \a0 is hex code for a non-breaking space */
    z-index: -1;
    background-color: red;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    margin-left: -10px;
}

要获得列表项的收缩至适合宽度，请将 display: table 应用于 ul 元素，您可以使用 margin 将其居中: 0 auto 因为表是 block 级元素。

将 display: table-cell 应用于 li 元素，并可选择应用一些填充。

要获得红色背景，请将 :before 伪元素应用于 li.last 并通过设置 top: 0 绝对定位它并使用 height: 100% 来匹配 div 包装 block 的高度(它有 position: relative 来设置引用框架绝对定位。

伪元素上的 100% 宽度会导致溢出情况，但您可以通过在 div 上使用 overflow: hidden 来解决这个问题。

如果对 li 应用水平填充，则需要用负的左边距进行补偿，以使背景颜色与表格单元格 block 的边缘对齐。

最后为了让背景伪元素堆叠在文本后面，设置z-index: -1， 或一些合适的值，具体取决于您页面上的其他组件。

查看演示:http://jsfiddle.net/audetwebdesign/EruT7/

在 Firefox 中，结果如下所示: