如何让我的背景颜色填充我的所有内容，即使是水平滚动？

Question

我正在使用 an<ol>来显示带有行号的代码片段。由于我显示的是程序代码，因此我通过设置white-space: preon来禁用换行（并启用缩进） li，这意味着 的li内容可以超出右边距并导致页面具有水平滚动条。到目前为止，一切都很好。

li当我想在某些s 上设置背景颜色以调出特定的代码行时，问题就出现了。我可以background-color在 上设置li，但颜色只延伸到页面的右边缘；事实上，文本的最后 10 个像素左右（等于正文的右边距）没有背景颜色。如果我水平滚动，情况会更糟：背景颜色从页面左侧滚动。背景颜色只有一个浏览器宽度（减去页边距）。

这是说明问题的小提琴。如果向右滚动，我希望只要有文本，背景就为蓝色。

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

Answer 1

您可以使用和li的组合来“收缩包装”每个内容，如本答案所示。floatclear

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

最后一行来自 koala_dev 的回答。它强制较短内容的元素具有全角背景。

小提琴