在CSS中，当我滚动滚动条时，

的背景颜色消失了

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

当我滚动滚动条时，我看到背景颜色仅应用于原始未滚动区域。我怎么解决这个问题。

我的代码在这里 http://jsfiddle.net/unimous/VMZ87/

EDIT

另一个例子清楚地表明了我的问题。 http://jsfiddle.net/unimous/VMZ87/3/

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

对于列表项，您需要设置display财产给inline-block并设置min-width属性达到100%。这是你的jsFiddle http://jsfiddle.net/VMZ87/5/，并见下图：

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, use display: table-row.

看到这个jsFiddle http://jsfiddle.net/VMZ87/10/进行演示。

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