在CSS中，当我滚动滚动条时，背景颜色< li>消失 [英] In CSS, When I scroll the scroll bar, the background-color of <li> disappeared

问题描述

这样的HTML代码：

<div>
    <ol>
        <li class='a'>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
        <li class='b'>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</li>
    </ol>
</div>

这样的CSS代码：

div {
    width: 400px;
    overflow-x: scroll
}

.a {
    background-color: red;
}

.b {
    background-color: blue;
}

滚动滚动条时，我发现背景颜色到原始未滚动区域。我如何解决这个问题。

When I scroll the scroll bar, I see that the background color is only applied to the original unscrolled region. How can I solve this problem.

我的代码在这里

EDIT

另一个显示我的问题的示例。

Another example showing my problem clearly.

现在有第二个问题：第二行消失了...为什么

推荐答案

对于列表项，您需要将显示属性设置为 inline-block 并将 min-width 属性设置为100％。这是您的 jsFiddle ，如下所示：

For the list items you need to set the display property to inline-block and set the min-width property to 100%. Here's your jsFiddle, and see below:

div {
    width: 400px;
    overflow-x: scroll;   
}

li {
    min-width: 100%;
    white-space: nowrap;
    display: table-row; /* or inline-block */   
}

.a, .c, .e, .g {
    background-color: red;
}

.b, .d, .f {
    background-color: blue;
}​

EDIT

要使所有 li 元素的最长宽度 li ，请使用 display：table-row 。

To make all of the li elements the width of the longest li, use display: table-row.

请参阅 jsFiddle 进行示范。

li {
    min-width: 100%;
    white-space: nowrap;
    display: table-row;    
}

这篇关于在CSS中，当我滚动滚动条时，背景颜色< li>消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！