我怎样才能让我的背景色填充我的所有内容，即使是水平滚动？答案

【问题标题】：How can I make my background-color fill all my content, even with horizontal scrolling?我怎样才能让我的背景色填充我的所有内容，即使是水平滚动？
【发布时间】：2014-01-13 14:51:30
【问题描述】：

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

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

Here's a fiddle illustrating the problem。如果你向右滚动，我希望背景是蓝色的，只要有文字。

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

【问题讨论】：

标签： html css background-color horizontal-scrolling pre

【解决方案1】：

您可以使用float 和clear 的组合“收缩包装”每个li 的内容，如this answer。

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

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

Fiddle

【讨论】：

这也可以使用 koala_dev 的回答中的min-width: 100%，所以较短的项目至少延伸到右边距。

【解决方案2】：

您可以使用display: inline-block 使每个列表项适合其内容。将其与 min-width:100%; 结合使用，使较短内容的 lis 拉伸到整个容器的宽度。

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

Demo fiddle

【讨论】：

这会删除编号。
@Neikos 你可以使用 CSS 计数器来取回行号 (see demo)，但它会变成比 trojansdestroy 建议的更复杂的方法。
酷！不知道那个。学到了一些新东西:)
在某些字体大小下（例如我正在使用的 Consolas 10pt），这会在每个列表项之间留下垂直间隙 (fiddle)。它发生在 Firefox、Chrome 和 IE10 中，并且仅在您添加 display: inline-block 时才会发生。很奇怪。

【解决方案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 的显示更改为列表项以外的任何其他内容，它将丢失它的编号。（至少在 Chrome 中。）所以这样你就可以同时获得更多的开销。

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

【讨论】：

【解决方案4】：

我找到了解决问题的方法

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

相应地设置百分比

【讨论】：

这不适用于各种长度的内容，对未知长度的内容也无济于事。
:\ 抱歉只是想给出一个想法。我试图获得代表
不用道歉；我只是想提供一些透明度。至于代表，你最终会到达那里。如果您有耐心，编辑帖子以澄清问题是一个好的开始。
我尽我所能，尽我所能提供帮助，当然，我知道的很少，因为我有时会在网上搜索答案。谢谢你，虽然我很感激。