CSS table and list-style-position bug? Workaround?

Question

I have an unordered list with display: table; and list-style-position: inside; . The problem is on Google Chrome, the list items don't take up full width, but instead wrap to the next line.

http://jsfiddle.net/ntbq5/

Funny enough this doesn't always happen, so if you don't see what I'm talking about try clicking the "Run" button - here's what I'm seeing:

If I refresh the fiddle, somehow it appears normal again... http://i40.tinypic.com/30hr4gl.gif . Firefox and IE it appears normal as well. But on a real website, refreshing doesn't change anything for me. What's the solution?

EDIT: My bad, I forgot to say I need to center my table as well so I can't use 100% width http://jsfiddle.net/ntbq5/10/ What else can be done?

Answer 1

Use White-space:nowrap; to overcome this issue.

WORKING DEMO

The Code Change:

ul {
    display: table;
    list-style-position: inside;
    white-space:nowrap;
}

Hope this helps.

Answer 2

Maybe just define a width for the li elements:

li {
    width: 150px;
}

Here a screen of the fiddle where i added this:

http://jsfiddle.net/ntbq5/embedded/result/

Answer 3

You can add width 100% to your <ul> elements.

CSS:

ul {
   display: table;
   width: 100%;
   list-style-position: inside;
}

Answer 4

You are displaying the ul as table and table's width should be defined for fine looking. So you need to set width for that ul. So use this:

ul {
    display: table;
    list-style-position: inside;
    width: 100%;
}

As you mentioned your ul tag is having margin auto in the comment, you could assign text-align to center

demo