Question

the behaviour problem explained in the title is understandable but I need a workaround.

I made an example in JSfiddle: http://jsfiddle.net/TBXr4/2/

See in the first LI I have a couple of words. They are not getting lined up like I need them to but they are getting listed. How do i resolved this?

Let me make this a little more specific, I don’t want to set the width of the child UL manually, in fact I don’t want one to be set. I need a way sothat the parent UL will have a width set whilst the child UL will be the smallest possible width to inherit the text.

Answer 1

You could just set the white-space property of the li element:

li {
    /* other stuff */
    white-space: nowrap;
}

JS Fiddle demo.

The problem with this is that while the text will be visible outside of the parent ul‘s assigned width, the style of the li (it’s background-color / background-image) won’t carry over.

References:

• CSS white-space property.