html - CSS将背景颜色扩展到页面的右侧

Question

使用 HTML 等

<code style="background-color: #FFFFD9">
some block
of code
</code>

是否可以将背景颜色扩展到页面的右侧（而不仅仅是文本所在的位置）？

我不想使用 <div> 因为代码块嵌套在 <ul> 或 <ol> 所以我想在任何缩进级别保留代码块左侧的空白因为列表。

Answer 1

还有另一种可能的样式：

<code style="display:block; white-space:pre; width:100%; background-color: #FFFFD9;">
some block
of code
</code>

Answer 2

我们可能需要查看更多的标记和 CSS，但是您是否尝试过简单地将 设置width为 100%？

code { background: #ffffd9; width: 100%; }

Answer 3

我发现答案是将 <code> 放在只有一个单元格的表格中。然后可以为表格指定 CSS，使其具有 100% 宽度、无边距、边框填充等。

这使放置代码块的 <ol><li><ul><li> 的左侧缩进保持白色。彩色背景然后延伸到右侧。

CSS：

.tablecodeblock, .tablecodeblock td {width: 100%; border: 0; padding: 0; margin: 0}
.tablecodeblock td {background-color: #FFFFD9}

HTML：

<table class="tablecodeblock"><tr><td><code><xmp>Some block
of code</xmp></code>
</td></tr></table>