Question

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

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

Here's a fiddle illustrating the problem。如果向右滚动，我希望背景为蓝色，直到文本为止。

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

Answer 1

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

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

<强> Demo fiddle

Answer 2

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

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

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

Fiddle

Answer 3

直接使用li项目无法做到这一点。

但是span中的一个简单的li修复了此问题。

以下是相关代码：

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/

Answer 4

我找到了解决问题的方法

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

相应地设置百分比

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

4 个答案: