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

debugcn 发表于 Dev

乔·怀特

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

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

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

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

特洛伊木马

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

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

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

小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-5

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章