Question

我在有序列表中显示代码，以便显示行号。每个li都有一个pre标记，其中包含一行代码。

我的问题是，当我设置ol的宽度，并允许溢出滚动时，溢出的背景颜色与最初显示的区域的背景颜色不同。

ol的背景必须与li的背景颜色不同，以使线号更加突出。

我的CSS有问题吗，为什么会这样？如何为行号和代码滚动和使用不同的背景颜色？

HTML：

<ol class="code">
  <li>
    <pre>Hello World! This is a long line that you have to scroll to see.</pre>
  </li>
  <li>
    <pre>This is the second line that you have to scroll to see.</pre>
  </li>
</ol>

CSS：

  ol {
    width:200px;
    background-color:#CFCFCF; }

  pre {
    color:#FFF;
    background-color:#000; }

  .code {
    overflow:scroll; }

Example page

问题：

alt text

Answer 1

这是正确的行为。这是因为当文本溢出一个元素（在这种情况下，pre）时，该框不随之生长。

Answer 2

要解决此宽度问题，您可以将pre代码设置为display: inline。然后，我只是在li标记上添加了一些额外的填充以保持相同的外观。

完整示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        ol
        {
            width: 200px;
            background-color: #CFCFCF;
        }
        pre
        {
            color: #FFF;
            background-color: #000;
            display: inline;
        }
        .code li
        {
            margin: 12px 0px 12px 0px;
        }
        .code
        {
            overflow: scroll;
        }
    </style>
</head>
<body>
    <ol class="code">
        <li>
            <pre>World! This is a long line that you have to scroll to see.</pre>
        </li>
        <li>
            <pre>This is the second line that you have to scroll to see.</pre>
        </li>
    </ol>
</body>
</html>

Answer 3

我还遇到了类似的问题，使用Google Prettify Syntax Highlighter，其行号，备用行着色以及超出指定长度或宽度时允许溢出滚动条。对于我的情况，我用内联块解决了它。

<body>
<code style="display:block;width:100px;overflow:scroll;">
    <!-- Solution: add inline-block style to ordered list so that background-color will not be cropped -->
    <ol style="display:inline-block;">
        <li style="background-color:yellow;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
        <li>bbbbbbbbbbbbbbbbbbbbbbb</li>
        <li style="background-color:yellow;">ccccccccccccccc</li>
    </ol>
</code> 
</body>

在我的LI中，为什么溢出的bg颜色与其余的bg颜色不同？

3 个答案: