In CSS, when I scroll the scroll bar, the background color <li> faded

Question

HTML code:

<div> <ol> <li class='a'>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li> <li class='b'>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</li> </ol> </div> 

The CSS is as follows:

 div { width: 400px; overflow-x: scroll } .a { background-color: red; } .b { background-color: blue; } 

When I scroll the scroll bar, I see that the background color only applies to the original unencrypted area. How can I solve this problem.

My code is here

---

EDIT

Another example showing my problem.

I have a second problem: the second line has disappeared ... why

Answer 1

For list items, you need to set the display property to inline-block and set the min-width property to 100%. Here's jsFiddle and see below:

 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

To make all li elements the width of the longest li , use display: table-row .

See the jsFiddle demo .

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

Answer 2

Long, unbreakable text (aaaaaaaa .....) causes text to be squeezed out of the div you specified to be 400 pixels wide. If you want to keep the width, you can stop the text from extrusion by applying this rule

 word-wrap: break-word; 

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

Support is good for this rule.

Answer 3

use word-wrap: break-word; because the word-wrap property allows long words to be broken and wrap to the next line.

Answer 4

This can be fixed with this code. jsfiddle

What I did here, enter the inner div

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

and set it as CSS

 #in { width:500px; } 

Note that 500px is the maximum width in the <li> element.

By the way, this is the standard behavior of how it works. If you've ever worked with code plugins in Wordpress. They behave the same way. If you scroll to the right, the scrolled text has no background.

Answer 5

You can solve this problem by specifying your lists as inline

 li { display: inline; } 

Demo