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

[Ben C]

On 2007-06-06, dorayme <do************ @optusnet.com.a uwrote:

In article <sl************ *********@bowse r.marioworld>,
Ben C <sp******@spam. eggswrote:

>On 2007-06-05, dorayme <do************ @optusnet.com.a uwrote:

In article <sl************ *********@bowse r.marioworld>,
Ben C <sp******@spam. eggswrote:

On 2007-06-04, dorayme

They are a devil to code for with numbers and "border" separators
even in the browsers that show the numbers. When I messed about
with them, I found it simpler to forget about separators, beyond
perhaps a ";" after the text in each <li></li>.

The spec doesn't define precisely where "outside" positioned list item
markers go so if you want to change the layout of the list much from the
normal vertical style it's probably better to do the numbers yourself
(in spans or something) and then you have more control over them.

Yes. Or in a table for a very short ordered list (where wrapping
is unlikely to be an issue).

I once argued that an ordered list was in some sense equivalent
to a 2 col table, the left col containing the order and the right
the corresponding content, row by row, thus being tabular in its
heart of hearts. But any idea of presenting an ordered list in a
horizontal manner makes me think that a one row table would not
be an obviously helpful substitute. Because the logical
relationships between the cells with numbers and the cells with
corresponding content would be in pairs that are just a bit
harder to describe or be evident - "count in pairs from the first
cell", the voice reader pauses at the end of the pairs...

You could nest the tables so each pair was in its own table. Better
though would just be to use inside list item markers, e.g.

li
{
list-style-position: inside;
float: left;
margin-right: 1em;
border: 1px dashed gray;
}

It perhaps should be pointed out that float: left will put the items in
the wrong order if direction is set to rtl. Table cells however will go
right to left depending on the value of direction (or the HTML dir
atttribute).