Separate text alignment within list item (<li>)

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

abro - 29 Sep 2004 21:51 GMT

Problem:
A list contained in a div contains several items that are made of two
parts: itemName and itemValue.

ie:

<div id="data">
<li>longtime1 <span> 1326 mins></span></li>
<li>longtime2 <span> 1692 mins</span></li>
<li> time1 <span> 24 mins </span></li>
<li> time2 <span> 1 min </span></li>
<li> time3 <span> 4 mins </span></li>
<li> time4 <span> 0 mins </span></li>
<div>

Is it possible (using css) to right align the itemValues while at the
same time left align the itemNames? I was unsuccessful with the below
CSS. Of course there is the alternative of using an html table but I
wanted to see the CSS alternative (if one exists).

#data ul {
    list-style-type: none;
    margin: 0px 0px 0px 0px;
}
#data ul li {
    font-size: .75 em;
    text-align: left;
}
#data ul li span {
    margin-right: 0px;
}

Thanks for any input:
Abro

Reply to this Message

Harlan Messinger - 29 Sep 2004 21:55 GMT

> Problem:
> A list contained in a div contains several items that are made of two
[quoted text clipped - 15 lines]
> CSS. Of course there is the alternative of using an html table but I
> wanted to see the CSS alternative (if one exists).

This *is* a table, so there's no need for pretending it's a list or using a
CSS alternative.

Besides--you *do* know that <li> doesn't go inside <div>?

Reply to this Message

Neal - 30 Sep 2004 07:17 GMT

> Besides--you *do* know that <li> doesn't go inside <div>?

Sure it can - supposing there's an intervening ul or ol.

Reply to this Message

abro - 30 Sep 2004 19:32 GMT

> > Problem:
> > A list contained in a div contains several items that are made of two
[quoted text clipped - 18 lines]
> This *is* a table, so there's no need for pretending it's a list or using a
> CSS alternative.

Thank you Harlan for your comments.
You didn't entirely address my 'Is it possible' question? Which are
you saying:

A) No it is not possible. Use a table.
B) Yes it is possible, but 'incorrect'. Use a table.

If the answer is B.. is there anyone out there that is willing to tell
me how to do it without a table?

> Besides--you *do* know that <li> doesn't go inside <div>?

I assume you are pointing out that I forgot to properly close the div
tag above </div> as well as include <ul></ul>. Both are a typo in the
posting (not my actual code :)). I appreciate the clarification. One
other aside, I removed other non-list elements from the div for my
post since they didn't relate to the question at hand. Those other
non-posted elements justify wrapping the list in a div as all of the
elements (including the list) are presentation related.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / September 2004

Separate text alignment within list item (<li>)