On Wed, Aug 3, 2011 at 8:38 PM, Tod <listac...@gmail.com> wrote:
> On 08/03/2011 8:37 AM, Tod wrote:
>>
>> I'm trying to create what is essentially a numbered list but I want to
>> be able to independently manipulate the number and the associate
>> hyperlink. I also need the link text to stay aligned horizontally no
>> matter how big the line number gets.
You could put the number into another element then move it outside of
the list item by giving it a negative left margin equal to its width.
Will something like this do what you wanted?
HTML:
<ol>
<li><span class="lineno">2. </span>one</li>
<li><span class="lineno">3. </span>one</li>
<li><span class="lineno">4. </span>one</li>
<li><span class="lineno">5. </span>one</li>
<li><span class="lineno">6. </span>one</li>
<li><span class="lineno">7. </span>one</li>
<li><span class="lineno">8. </span>one</li>
<li><span class="lineno">9. </span>one</li>
<li><span class="lineno">10. </span>one</li>
</ol>
CSS:
ol {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: block;
float: left;
margin-left: 5em;
width: 5em;
}
span.lineno {
display: block;
float: left;
text-align: right;
padding-right: .5em;
width: 2em;
margin-left: -2em;
}
--
Ghodmode
http://www.ghodmode.com/blog
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
