Ordered List

[shapper]

Hello,

I have the following:

<ol id ="ol">
<li id="li1">item1 </li>
<li id="li2">item2 </li>
<ol>

Is it possible to display the List Items on the horizontal, i.e., side
by side instead of one List Item per line?
And can I make li1 Width = 20% and li2 Width = 80%?

How can I do this using CSS?

Thanks,
Miguel

[scripts.contact]

On Jun 3, 2:49 pm, shapper <mdmo...@gmail. comwrote:

Is it possible to display the List Items on the horizontal, i.e., side
by side instead of one List Item per line?

use a UL and
display:inline-block;
or
float:left
on LIs

And can I make li1 Width = 20% and li2 Width = 80%?

#li1{width:20%}
#li2{width:80%} ??

[dorayme]

In article
<11************ ********@a26g20 00pre.googlegro ups.com>,
"scripts.contac t" <sc************ *@gmail.comwrot e:

On Jun 3, 2:49 pm, shapper <mdmo...@gmail. comwrote:

Is it possible to display the List Items on the horizontal, i.e., side
by side instead of one List Item per line?

use a UL and
display:inline-block;
or
float:left
on LIs

Perhaps you might give an example using these alternatives you
mention.

--
dorayme

[scripts.contact]

On Jun 3, 7:56 pm, dorayme <doraymeRidT... @optusnet.com.a uwrote:

Is it possible to display the List Items on the horizontal, i.e., side
by side instead of one List Item per line?

use a UL and
display:inline-block;
or
float:left
on LIs

Perhaps you might give an example using these alternatives you
mention.

-HTML-

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>

-STYLE-

li {display:inline-block;border:1p x dotted gray}

[Jonathan N. Little]

dorayme wrote:

In article
<11************ ********@a26g20 00pre.googlegro ups.com>,
"scripts.contac t" <sc************ *@gmail.comwrot e:

>On Jun 3, 2:49 pm, shapper <mdmo...@gmail. comwrote:

>>Is it possible to display the List Items on the horizontal, i.e., side
by side instead of one List Item per line?

use a UL and
display:inline-block;
or
float:left
on LIs

Perhaps you might give an example using these alternatives you
mention.

LI { display: inline; }

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Jukka K. Korpela]

Scripsit scripts.contact :

>Perhaps you might give an example using these alternatives you
mention.

- -

li {display:inline-block;border:1p x dotted gray}

Perhaps next time you will actually test your proposed solution before
posting it, _at least_ on the dominant browser.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Ben C]

On 2007-06-03, shapper <md*****@gmail. comwrote:

Hello,

I have the following:

<ol id ="ol">
<li id="li1">item1 </li>
<li id="li2">item2 </li>
<ol>

Is it possible to display the List Items on the horizontal, i.e., side
by side instead of one List Item per line?

Setting display: inline on the list items will do that.

And can I make li1 Width = 20% and li2 Width = 80%?

But you can't set width on inlines, so make them float: left instead. If
they have any borders, padding or margin you'll need to make the total
add up to a bit less than 100%.

Inline-block would be ideal, but isn't supported by Firefox.

[scripts.contact]

On Jun 3, 10:24 pm, "Jonathan N. Little" <lws4...@centra lva.net>
wrote:

On Jun 3, 2:49 pm, shapper <mdmo...@gmail. comwrote:
Is it possible to display the List Items on the horizontal, i.e., side
by side instead of one List Item per line?
use a UL and
display:inline-block;
or
float:left
on LIs

Perhaps you might give an example using these alternatives you
mention.

LI { display: inline; }

but then you cant set width .

[dorayme]

In article
<11************ **********@r19g 2000prf.googleg roups.com>,
"scripts.contac t" <sc************ *@gmail.comwrot e:

On Jun 3, 7:56 pm, dorayme <doraymeRidT... @optusnet.com.a uwrote:

Is it possible to display the List Items on the horizontal, i.e., side
by side instead of one List Item per line?

use a UL and
display:inline-block;
or
float:left
on LIs

Perhaps you might give an example using these alternatives you
mention.

-HTML-

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>

-STYLE-

li {display:inline-block;border:1p x dotted gray}

This is not an ordered list. I asked because while the ul one is
quite straightforward , the <olone is just that more tricky to
get right, no? To get the numbers in too remember... and to look
reasonable.

--
dorayme

[shapper]

On Jun 4, 10:40 am, dorayme <doraymeRidT... @optusnet.com.a uwrote:

In article
<1180924483.736 184.314...@r19g 2000prf.googleg roups.com>,

"scripts.contac t" <scripts.cont.. [e-mail] e:

On Jun 3, 7:56 pm, dorayme <doraymeRidT... @optusnet.com.a uwrote:

Is it possible to display the List Items on the horizontal, i.e., side
by side instead of one List Item per line?

use a UL and
display:inline-block;
or
float:left
on LIs

Perhaps you might give an example using these alternatives you
mention.

-HTML-

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>

-STYLE-

li {display:inline-block;border:1p x dotted gray}

This is not an ordered list. I asked because while the ul one is
quite straightforward , the <olone is just that more tricky to
get right, no? To get the numbers in too remember... and to look
reasonable.

--
dorayme

Hi,

I just found this web site:
http://css.maxdesign.com.au/listamatic/

Really nice.

Thanks,
Miguel