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

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

My Code is Here

修改

Another example showing my problem clearly.

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

Answer 1

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

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

修改

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

请参阅此jsFiddle进行演示。

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

Answer 2

长不易破坏的文本（aaaaaaaa .....）导致文本从您指定的宽度为400px的div中挤出。如果要保持宽度，可以通过应用此规则来停止文本挤出

word-wrap: break-word;

http://jsfiddle.net/joshdavenport/v6TVg/

Support is good for this rule

Answer 3

使用自动换行：break-word;因为自动换行属性允许长字能够被打破并换行到下一行。

Answer 4

这可以通过此代码修复。 jsfiddle

我在这里所做的是介绍一个内部div

<div id="outer">
    <div id="in">

并像这样设置CSS

#in {
    width:500px;
}

请注意，500px是<li>项目中的最大宽度。

顺便说一下，这是它的标准行为。如果您曾在Wordpress中使用过代码插件。它们的行为完全相同。如果向右滚动，则滚动的文本没有背景。

Answer 5

您可以将列表定义为inline

来解决此问题

li { display: inline; }

Demo

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

5 个答案: