Keith, 

Do you have to use <li>? It makes more sense to use <dl>, something like
this: 

<style>
dl { width: 440px; }
dt { float: left; width: 100px; text-align: right; clear: both; }
dd { float: right; width: 300px }
</style>
<dl>
        <dt>term 1 -</dt>
        <dd>Term 1 is the very first term in the list. </dd>
        <dt>term 2 -</dt>
        <dd>Term 2 is the second term in this definition list.</dd>
        <dt>term 3 -</dt>
        <dd>Term 3 is the third term in this fairly long definition
list. </dd>
</dl>

-Nigel



-----Original Message-----
From: Keith Sader [mailto:[EMAIL PROTECTED] 
Sent: Wednesday, May 18, 2005 11:08 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] aligning li items


Greetings.

We've got a requirement to align some li items.

The list items are basically expaining acronyms.

ABC    - Alpha Beta Charlie
DFQG  - Delta Fox Quarrel Gamma

However the alignment requirement is such that the acronym explanations
are all lined up at the dashes.

I've thought of structuring the html like this:

<li><span>ABC</span>- Alpha...</li>
<li><span>DFQG</span>- DFQG...</li>

then adding the following style

li span {
   width: 200px;
}

but this doesn't give me a 'default' box area to keep the acronyms in.
Any suggestions?  I've looked at list-o-matic and I don't see anything
that does this.

thanks,
-- 
Keith Sader
[EMAIL PROTECTED]
http://www.saderfamily.org/roller/page/ksader
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to