By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,352 Members | 1,593 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,352 IT Pros & Developers. It's quick & easy.

Separate text alignment within list item (<li>)

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a

"abro" <bs*******@hotmail.com> wrote in message
news:23**************************@posting.google.c om...
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).


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>?

Jul 20 '05 #2

P: n/a
On Wed, 29 Sep 2004 16:55:11 -0400, Harlan Messinger
<h.*********@comcast.net> wrote:
Besides--you *do* know that <li> doesn't go inside <div>?


Sure it can - supposing there's an intervening ul or ol.
Jul 20 '05 #3

P: n/a
"Harlan Messinger" <h.*********@comcast.net> wrote in message news:<2s*************@uni-berlin.de>...
"abro" <bs*******@hotmail.com> wrote in message
news:23**************************@posting.google.c om...
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).
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.
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.