如何让背景色填充整个内容区域，即使有水平滚动条？

Question

我正在使用<ol>标签展示带有行号的代码片段。由于我展示的是程序代码，所以我通过在li上设置white-space: pre来禁用换行（并启用缩进），这意味着li的内容可以超出右边距并导致页面出现水平滚动条。到目前为止还好。

问题出现在我想要在一些li上设置背景颜色以突出显示特定的代码行时。我可以在li上设置background-color，但是颜色仅延伸到页面的右边距；事实上，最后的10个像素或者说与body元素的右边距相等的数量的文本没有背景颜色。如果我水平滚动，情况会更糟：背景颜色向左滚动并从页面中消失。背景颜色只有一个浏览器宽度（减去页面边距）。 这里有一个演示问题的示例。如果您向右滚动，我希望背景颜色一直保持蓝色，直到文本结束。

如何使background-color填充整个内容的宽度，即使页面水平滚动？

- Joe White

Answer 1

你可以使用float和clear的组合来“缩小包装”每个li的内容，例如此答案。

li {
    white-space: pre;
    background: blue;
    float:left;
    clear:left;
    min-width:100%;
}

这段话的最后一行来自于koala_dev的回答，它会强制让短内容元素具有全宽度背景。这里提供一个示例链接：Fiddle。

- Trojan

---

这也可以使用koala_dev的答案中的min-width: 100%，这样较短的项目至少会延伸到右边缘。 - Joe White

Answer 2

你可以使用 display: inline-block 来让每个列表项适应其内容。结合 min-width:100%; 使较短内容的 li 元素能够拉伸到容器的完整宽度。

li {
    white-space: pre;
    background: blue;
    display: inline-block;
    min-width:100%;
}

Demo fiddle

- omma2289

---

这会移除编号。 - Neikos

@Neikos 你可以使用CSS计数器来获取行号（请参见演示），但这比trojansdestroy建议的方法更为复杂。 - omma2289

太酷了！我不知道那个。学到了新的东西 :) - Neikos

在某些字体大小（例如我正在使用的Consolas 10pt），这会在每个列表项之间留下垂直间隙（[fiddle]（http://jsfiddle.net/5UUdP/））。它发生在Firefox，Chrome和IE10中，只有当您添加`display：inline-block`时才会发生。奇怪。 - Joe White

Answer 3

直接使用 li 无法实现此功能。

但是在 li 内部添加一个简单的 span 可以解决这个问题。

以下是相关代码：

span {
    white-space: pre; 
}
.highlight {
    background: blue;
}

你的标记将类似于：

<ol>
    <li><span> Code Here... </span></li>
    <li><span class="highlight"> Code Here... </span></li>
</ol>

这是因为，如果你将 li 的显示方式改为除了 list-item 以外的任何方式，它都将失去编号（至少在 Chrome 中是这样）。因此，通过稍微增加一点开销，你可以同时获得两者。

以下是展示它的 jsfiddle： http://jsfiddle.net/tp6Um/4/

- Neikos

Answer 4

我找到了一种解决你问题的方法

li 
{
white-space:pre;
display:block;
width:150%;
}

根据实际情况设置百分比。

- Yuriah

---

这种方法无法处理不同长度的内容，对于长度未知的内容也没有帮助。 - Trojan

抱歉，我只是想给你一个大概的想法。我正在努力获取声誉。 - Yuriah

不用道歉；我只是想提供一些透明度。至于声望，你最终会到达那里的。编辑帖子以澄清问题是一个很好的开始，如果你有耐心的话。 - Trojan

我会尽我所能提供帮助，虽然我的知识有限，但并不局限于此，因为我有时会在网上搜索答案。非常感谢你的支持，我很感激。 - Yuriah