CODEWITHSUNDEEP
htmlcsshtml-lists
Sowmya
Sowmya

Reputation: 26969

extend Ul list in paragraph

I need UL list to be placed inside the p tag. I have added inside p tag only but it is not exactly starting inside p tag. And also p tag has 1600px of width so I need the li elements to extend beyond that width (I have scroll bar for tat). Now li elements are flowing in multiple lines.

Here is my demo http://jsfiddle.net/VvuU4/2/

Upvotes: 2

Views: 563

Answers (1)

Olly Hodgson
Olly Hodgson

Reputation: 15775

Unfortunately for you, HTML does not allow ul (or div) to sit inside p, so browsers will automatically correct the DOM from this:

<p>
    <ul><li>etc</li></ul>
</p>

...to look something like this:

<p></p>
<ul><li>etc</li></ul>
<p></p>

You can verify this using their built-in developer tools. So you'll need to change your markup. Perhaps change the p to a div?

As for the second part of the question, this is a good place to start:

ul.list2 {
    width: 500px; /* adjust to suit your needs */
    overflow: auto;
    white-space: nowrap;
}
ul.list2 li {
    display: inline-block;
    vertical-align: top;
}

It sets the ul to use a scrollbar when necessary, and tells inline elements within it not to wrap. It then sets the list items to be inline block items, which makes them sit side by side (like display: inline;) but behave more like block items (i.e. margin, padding, width, height work as you'd expect).

Upvotes: 2

Related Questions