CODEWITHSUNDEEP
htmlcsshtml-lists
Ilya Karnaukhov
Ilya Karnaukhov

Reputation: 3977

How to get child UL to come outside parent UL

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.

Upvotes: 2

Views: 283

Answers (4)

dstibbe
dstibbe

Reputation: 1697

Why are you specifying a width to the exact element (UL) where you do not wish to adhere to it?

Apply the width setting to the main list and assign a new width to the sub-list as shown in this jsfiddle example

Upvotes: 0

Suresh Pattu
Suresh Pattu

Reputation: 6209

Demo is here

i think you want this only.

Upvotes: 1

David Thomas
David Thomas

Reputation: 253308

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:

Upvotes: 2

Llewellyn Collins
Llewellyn Collins

Reputation: 2341

The reason why the text is not displaying the sentence on one line is because you have set the width of the li, remove style="width:35px".

Upvotes: 0

Related Questions