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

Posted 2023-02-21

【中文标题】我怎样才能让我的背景色填充我的所有内容，即使是水平滚动？

【英文标题】：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 填满内容的整个宽度？

【参考方案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)，但它会变成比 ***sdestroy 建议的更复杂的方法。

酷！不知道那个。学到了一些新东西:)

在某些字体大小下（例如我正在使用的 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%;

相应地设置百分比

【讨论】：

这不适用于各种长度的内容，对未知长度的内容也无济于事。

:\ 抱歉只是想给出一个想法。我试图获得代表

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

我尽我所能，尽我所能提供帮助，当然，我知道的很少，因为我有时会在网上搜索答案。谢谢你，虽然我很感激。