CODEWITHSUNDEEP
csshtml-lists
Denis
Denis

Reputation: 1534

align ul inside li in one line

I'm trying to make some li's work and can't figure out the following: 1) for example:

<ul>
<li> very long element</li>
<li> short </li>
</ul>

is it possible with CSS to make the second li element to have width equall to text inside it? Apparently its width will be equall to the width of the first element

2) Can I arrange my li and ul in the following way (i write it without formatting so that it displays the way i would like it to be):

|ul|

|li|top1 |ul| |li|sub1|/li| |li|sub2|/li| |/ul|

|li|top2 |ul| |li|sub3|/li| |li|sub4|/li| |/ul|

|/ul|

in other words, have CSS which would align inside particular li ul and it's li in the same line with it?

Regards, Denis.

Upvotes: 2

Views: 14070

Answers (2)

Rhys Heredia
Rhys Heredia

Reputation: 470

I think this will answer both questions. Here is the simplest way I can achieve this. The list will stay all in one single line while the markup is still semantically correct. I added padding just so to keep the items evenly spaced.

HTML

<ul>
    <li>List 1:1</li>
    <li>List 1:2</li>
    <li>List 1:3</li>
    <li>
        <ul>
            <li>List 2:1</li>
            <li>List 2:2</li>
            <li>List 2:3</li>
        </ul>
    </li>
    <li>List 3:1</li>
    <li>List 3:2</li>
    <li>List 3:3</li>
</ul>

CSS

ul { list-style-type:none; margin:0; padding:0; }
li { display:inline; float:left; padding:0 10px; margin:0; }

Upvotes: 3

Chris G.
Chris G.

Reputation: 3981

You might be looking for something like this, I'm not sure:

HTML

<ul>
    <li>item one</li>
    <li>item two two two two two</li>
    <li>item three three</li>
</ul>

CSS

ul li { float: left; clear: left; margin-bottom: 10px; background: #ccc }

Looks like

http://jsfiddle.net/BWZfr/

And for your second question... maybe you mean something like http://jsfiddle.net/BWZfr/1/ ?

Upvotes: 3

Related Questions