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 }

我在预先格式化的标签中有一个有序列表。每个其他列表元素要么被赋予类属性，要么被赋予li1（li2其目的是交替颜色）。列表元素需要 ，white-space: pre因为文本节点前后的空格很重要。这pre是包含元素的 80%（最终是窗口宽度的 80%）。在 x 维度溢出的情况下，我想要滚动。

我在上面的 CSS 中做了所有这些，它几乎可以工作。我遇到的问题是列表元素的背景颜色不随内容扩展。它们似乎被限制为pre和/或 ol的原始宽度，element如下图所示，我尽可能向右滚动：

列表元素背景颜色不扩展

我对 CSS 进行了一段时间的修改，但我无法确定此问题的根本原因或修复方法。求这方面的建议，谢谢。

该问题的完整来源如下，注意：对于以下代码的潜在编辑者，该pre元素旨在位于一行上，因为它是预先格式化的文本，否则对其进行格式化会改变事情。

<!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

pre 固定为 80%，因此备用颜色停在那里，我们可以使用以下样式将 li 扩展到最后。

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

演示

于 2012-10-01T21:11:19.790 回答