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

检查出来

http://www.w3schools.com/cssref/sel_last-child.asp

这个css选择器在这种情况下非常有用

所以你可以说：

div ul li:last-child{
    /*things for extend the tag area*/
    padding: 5px;
    background-color: #555;
}

如果你想要更多，请检查整个参考

http://www.w3schools.com/css/css_pseudo_classes.asp

Gl：）

Answer 2

这是使用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;
}

要获得列表项的shink-to-fit宽度，请将display: table应用于ul元素，您可以使用margin: 0 auto将其置于中心，因为表格是块级元素。

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

要获得红色背景，请将:before伪元素应用于li.last并通过设置top: 0绝对定位，并使用height: 100%来匹配div的高度{1}}包装块（有position: relative来设置绝对定位的参照系。

伪元素的宽度为100％会导致溢出情况，但您可以使用overflow: hidden上的div来处理此问题。

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

最后要将背景伪元素叠加到文本后面，设置z-index: -1，或者一些合适的值，具体取决于页面上的其他组件。

请参阅演示：http://jsfiddle.net/audetwebdesign/EruT7/

在Firefox中，结果如下：

enter image description here

Answer 3

使用当前的css（带有居中文本的内联元素），无法使其正常工作。以下示例将以与您提供的示例不同的方式工作。

div ul {list-style: none;
    margin: 0;
    padding: 0
}
div ul li {
    float: left;
    width: 100px;
    background: white
}
div ul li:last-child {
    float: none;
    width: auto;
    background-color: red
}

http://jsfiddle.net/blackbiron/X4tTw/

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

3 个答案: