html - 背景色をページの右側に拡張する CSS

Question

などのHTMLで

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

背景色を (テキストがある場所だけでなく) ページの右側まで拡張することは可能ですか?

コードのブロックが <ul> または <ol> 内にネストされているため、 <div> を使用したくないため、インデントのレベルに関係なく、コード ブロックの左側にある空白を保持したいリストのため。

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

答えは、セルが 1 つしかないテーブル内に <code> を配置することであることがわかりました。次に、100% の幅、余白なし、境界線、パディングなどを指定するテーブルに CSS を指定できます。

これにより、コード ブロックが配置されている <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>