On 08/03/2011 9:16 AM, Philippe Wittenbergh wrote:
On Aug 3, 2011, at 9:37 PM, 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.
I've got something similar to this:
<ul>
<li>1.</li>
<li><a href="">Text1</a>
<li>2.</li>
<li><a href="">Text2</a>
.
.
.
<li>1000.</li>
<li><a href="">Text1000</a>
</ul>
I've tried every combination of float, display, inline, etc. and I can't get it
to look like this:
1. Item1
2. Item2
.
.
1000. Item1000
Its embarrassing, I know I've done this in some fashion before but its been a
while since I've played with CSS so I've gotten rusty. Is there a simple
solution someone could clue me in on?
http://www.w3.org/TR/CSS21/generate.html#counters
Set a width on the generated counter wide enough to allow for the highest
number in your list ( + display:inline-block ).
Oh, and - use<ol>
<ol>
<li><a href=""></a>
....
Is display:inline-block cross browser comparable?
Also, I don't think I can use an ordered list because the HTML is being
generated by javascript by updating the DOM. The actual list of items
is part of a paging routine so they can change dynamically based on user
input.
My first attempt was to set everything up similar to a horizontal
navigation menu with each only two items, the number and the link, and
them stacking each one on top of the other. That didn't really work
well and quickly became messy.
I'm looking at the examples you just posted now.
Thanks!
______________________________________________________________________
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/
