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

Question

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

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

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

我的代码在这里

编辑

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

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

- Yishu Fang

我曾经认为<li>标签的默认显示设置是行内元素，但实际上它是列表项。+1 - user900360

这里有几个解决方案，你可能想要检查所有答案。 - TheTechGuy

5个回答

1

长篇不可打破的文本（aaaaaaaa.....）导致文本从您指定为400px宽度的

中突出。如果您想保持宽度，可以通过应用此规则停止文本的突出。

word-wrap: break-word;

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

支持这个规则是很好的

- Josh Davenport-Smith

这只是将文本放到下一行，以便它不会滚动吗？我认为 OP 想要列表滚动... - James Johnson

谢谢，但我只想让它可以滚动。这个例子 - Yishu Fang

0

使用 word-wrap:break-word;，因为 word-wrap 属性允许长单词被分割并换行到下一行。

- srini

0

这可以通过以下代码进行修复。jsfiddle

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

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

并将其CSS设置为以下内容

#in {
    width:500px;
}

请注意，<li> 项中的最大宽度为500像素。

顺便说一下，这是标准行为方式。如果您曾经使用过WordPress中的代码插件，它们也会以完全相同的方式运作。如果您向右滚动，滚动的文本没有背景。

- TheTechGuy

-1

您可以通过将列表定义为inline来解决此问题。

li { display: inline; }

演示

- Starx

这将从根本上改变LI的行为，除非需要新的行为（OP没有指示），否则不应使用。 - Umbrella

@Umbrella，自从li元素的行为不再是内联的了？ - Starx

li 的默认值为 {display:list-item}，将其更改为 inline 会使它们像普通文本一样流动，这通常是不可取的。 - Umbrella

@Umbrella，你的观点是“不行，LI标签无法内联”，还是有一些事实来支持这个观点？ - Starx

这并不是一般意义上的“错误”，只是因为它会以一种 OP 不要求的方式改变它们的渲染。它不能给 OP 他们所寻求的最终结果。在这个简单的例子中可能没问题，但当他们在真实文档中尝试时，很可能会引起其他问题。 - Umbrella

@Umbrella，我只同意你最后的评论。其余的都是胡说八道（抱歉）。 - Starx

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James Johnson · Accepted Answer

对于列表项，您需要将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;    
}