Question

我创建了一个简单的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的原始宽度，如下图所示，我尽可能向右滚动：

List Element background colors don't extend

我用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>

Answer 1

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

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

Demo

li元素背景颜色和溢出滚动

1 个答案: