即使水平滚动，如何使背景色填充所有内容? [英] How can I make my background-color fill all my content, even with horizontal scrolling?

问题描述

我正在使用<ol>来显示带有行号的代码段.由于我正在显示程序代码，因此我通过在li上设置white-space: pre来禁用换行(并启用缩进)，这意味着li的内容可能会超出右边距并导致页面进行水平滚动酒吧.到目前为止一切顺利.

I'm using an <ol> to show a code snippet with line numbers. Since I'm showing program code, I disable wrapping (and enable indentation) by setting white-space: pre on li, which means an li's content can extend past the right margin and cause the page to have a horizontal scroll bar. So far so good.

当我想在某些li上设置背景色以调出特定的代码行时，就会出现问题.我可以在li上设置background-color，但是颜色仅扩展到页面的右边距；实际上，文本的最后10个像素左右(等于主体右边缘的数量)没有背景色.而且，如果我水平滚动，那就更糟了:背景颜色从页面左侧滚动.背景颜色只有一个浏览器宽度(减去页边距)宽.

The problem comes when I want to set background colors on some of the lis to call out particular lines of code. I can set background-color on the li, but the color only extends to the right margin of the page; in fact, the last 10 pixels or so of text (an amount equal to the body's right margin) has no background color. And if I scroll horizontally, it's even worse: the background color scrolls left off the page. The background-color is only one browser-width wide (minus the page margins).

这是说明问题的小提琴.如果您向右滚动，我希望背景一直是蓝色，直到有文字为止.

Here's a fiddle illustrating the problem. If you scroll right, I want the background to be blue for as far as there's text.

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

How can I get the background-color to fill the full width of the content, even if the page scrolls horizontally?

推荐答案

您可以使用float和clear的组合来收缩"每个li的内容，如

You can "shrink-wrap" each li's content with a combination of float and clear, as in this answer.

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

最后一行来自koala_dev的答案.它会迫使内容较短的元素具有全角背景.

The last line is from koala_dev's answer. It forces shorter-content elements to have full-width background.

小提琴

这篇关于即使水平滚动，如何使背景色填充所有内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！