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

我在有序列表中显示代码，以便它显示行号。每个li都有一个pre标记，其中填充了一行代码。在我的LI中，为什么溢出的bg颜色与其余的bg颜色不同？

我的问题是，当我设置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

来源

2010-09-18 Peter Ajtai

这是正确的行为。这是因为当文本溢出一个元素（在这种情况下，pre）框而不是与它一起增长。

来源

2010-09-18 09:57:27

要解决此宽度问题，您可以将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>

来源

2010-09-18 13:51:19 wsanville

我也使用谷歌美化语法高亮与行号，行交替着色并允许溢出滚动超过指定的长度或宽度当遇到类似的问题。对于我的情况，我用内联块解决了它。

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

来源

2012-10-06 11:53:00 MrTan

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

回答

相关问题