代码之家 › 专栏 › 技术社区 › Peter Ajtai

在我的李,为什么溢出的bg颜色不同于其余的bg颜色?

scroll css html

Peter Ajtai · 技术社区 · 14 年前

我在一个有序的列表中显示代码,这样它就会显示行号。每个 li 有一个 pre 标签中填充了一行代码。

我的问题是当我设置 ol 而且,我允许溢出滚动,溢出的背景颜色不同于原来显示的区域的背景颜色。

的背景 醇 必须是与背景不同的颜色 锂 使行号突出。

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

3 回复 | 直到 14 年前

Delan Azabani 14 年前

这是正确的行为。这是因为当文本溢出元素时(在本例中 pre )这个盒子可以不和它一起成长。

wsanville 14 年前

为了解决这个宽度问题,可以设置 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>

MrTan 12 年前

我也遇到了类似的问题,使用谷歌PrimScript语法高亮与行数,交替行着色,并允许溢出滚动条超过指定的长度或宽度。我用内联块解决了这个问题。

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前