0

簡単な html ソースを作成し、それに小さな CSS スタイル シートを適用しました。

html {
    width: 100%;
}
body {
    font-family: Calibri, Tahoma, Geneva, sans-serif;
    padding: 20px;
}
pre {
    padding: 0;
    margin: 0 auto;
    border: 1px solid #888; 
    font-family: Menlo,Monaco,Consolas,monospace;
    color: #000;
    width: 80%;
    overflow: auto; 
}
pre li { white-space: pre; }

ol { margin-top: 0; margin-bottom: 0;  /* IE indents via margin-left */
     color: #979797; background: #E3E3E3; }
.li1 { background: #F5F5F5 }
.li2 { background: #eee }

事前にフォーマットされたタグ内に順序付きリストがあります。他のすべてのリスト要素には、class 属性が与えられるか、li1またはli2(その目的は色を交互にすることです) のいずれかです。white-space: preテキスト ノードの前後の空白が重要であるため、リスト要素には が必要です。これpreは、含まれている要素の 80% になります (ウィンドウの幅の 80% になります)。x 次元でオーバーフローが発生した場合、スクロールが必要です。

上記のCSSでこれをすべて行いましたが、ほとんど機能します。私が抱えている問題は、リスト要素の背景色がコンテンツと一致しないことです。pre次の図に示されているように、 and/or olの元の幅に制限されているように見えelementます。ここでは、可能な限り右にスクロールしています。

リスト要素の背景色が拡張されない

しばらくの間、CSS をいじりましたが、これの根本原因または修正を特定できません。これに関するアドバイスを探しています、ありがとう。

問題のある完全なソースは次のとおりです。注: 以下のコードの編集者になるには、pre要素は書式設定済みのテキストであるため 1 行に配置することを意図しており、それ以外の形式で書式設定すると状況が変わります。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Test Site</title>
    <style type="text/css">
    html {
    width: 100%;
    }
    body {
        font-family: Calibri, Tahoma, Geneva, sans-serif;
        padding: 20px;
    }
    pre {
        padding: 0;
        margin: 0 auto;
        border: 1px solid #888; 
        font-family: Menlo,Monaco,Consolas,monospace;
        color: #000;
        width: 80%;
        overflow: auto; 
    }
    pre li { white-space: pre; }

    ol { margin-top: 0; margin-bottom: 0;  /* IE indents via margin-left */
         color: #979797; background: #E3E3E3; }
    .li1 { background: #F5F5F5 }
    .li2 { background: #eee }
    </style>
</head>

<body>


<pre class="php"><ol><li class="li1">pre a &#123; text-decoration: none &#125;</li><li class="li2">pre a:hover &#123; background: #C8C8C8 }</li><li class="li1">pre li &#123; white-space: pre; &#125;</li><li class="li2">&nbsp;</li><li class="li1">.php ol &#123; margin-top: 0; margin-bottom: 0;  /* IE indents via margin-left */</li><li class="li2">          color: #979797; background: #E3E3E3; }</li><li class="li1">&nbsp;</li><li class="li2">&nbsp;</li><li class="li1">&nbsp;</li><li class="li2">.php .li1 &#123; background: #F5F5F5 }</li><li class="li1">.php .li2 &#123; background: #eee }</li><li class="li2">&nbsp;</li><li class="li1">&nbsp;</li><li class="li2">.php .st0  &#123; color: #C0C } /* string content */</li><li class="li1">.php .st_h &#123; color: #F0C } /* string content single quoted */</li><li class="li2">.php .sy0  &#123; color: #000 } /* semi-colon, operators */ </li><li class="li1">.php .br0  &#123; color: #000 } /* parens */</li><li class="li2">.php .kw2  &#123; color: #00F } /* php tags */</li><li class="li1">.php .sy1  &#123; color: #00F } /* php tags */</li><li class="li2">.php .nu0  &#123; color: #F00 } /* numbers */</li><li class="li1">.php .kw3  &#123; color: #096 } /* core language functions */</li><li class="li2">.php .re0  &#123; color: #09F; font-weight: bold; } /* variables */</li><li class="li1">.php .kw1  &#123; color: #069; font-weight: bold; } /* control statements? */</li><li class="li2">.php .kw4  &#123; color: #069; font-weight: bold; } /* bool? */</li><li class="li1">.php .co1  &#123; color: #FF8400 } /* Forward slash comments */</li></ol></pre>
</body>
</html>
4

1 に答える 1

0

プレは80％で固定されているので、代替色はそこで止まります。以下のスタイルを使用して、最後までliを拡張できます。

    .li1 { background: #F5F5F5;width:200%; }
    .li2 { background: #eee;width:200%; }

デモ

于 2012-10-01T21:11:19.790 に答える