在CSS中,当我滚动滚动条时,<li>的背景颜色消失了

Question

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

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

我的代码就在这里

---

编辑

另一个例子清楚地显示我的问题

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

Answer 1

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

\n\n

div {\n    width: 400px;\n    overflow-x: scroll;   \n}\n\nli {\n    min-width: 100%;\n    white-space: nowrap;\n    display: table-row; /* or inline-block */   \n}\n\n.a, .c, .e, .g {\n    background-color: red;\n}\n\n.b, .d, .f {\n    background-color: blue;\n}\xe2\x80\x8b\n

\n\n

编辑

\n\n

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

\n\n

请参阅jsFiddle进行演示。

\n\n

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

\n