7

像这样的 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;
}

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

我的代码在这里

编辑

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

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

4

5 回答 5

5

对于列表项，您需要将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;    
}
于 2012-04-12T16:37:57.443 回答
1

div长的牢不可破的文本 (aaaaaaaa .....) 导致文本从您指定的宽度为 400 像素的文本中挤出。如果您想保持宽度，您可以通过应用此规则来阻止文本挤出

word-wrap: break-word;

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

支持对这条规则有好处

于 2012-04-12T16:25:29.327 回答
0

使用自动换行：断词；因为 word-wrap 属性允许长单词被打破并换行到下一行。

于 2012-04-12T17:04:50.477 回答
0

可以使用此代码修复此问题。jsfiddle

我在这里所做的是引入一个内部 div

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

并像这样设置它的CSS

#in {
    width:500px;
}

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

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

于 2012-04-12T17:12:09.190 回答
-1

您可以通过将列表定义为inline

li { display: inline; }

演示

于 2012-04-12T16:24:17.793 回答