I want to make a vertical list of words, each with a small arrow graphic to the right, kind of like this (but without the dots):
Pineapple.> Grape.....> Banana....>
As you can see, I'd like all the arrow graphics to be in line with each other.
This whole thing sits in a div. I won't know the width because I won't know what words will go in the list because it'll be dynamically generated. That means I can't set the width of a span to line up the arrows.
I could just use a table to line up the arrows, but I don't want to because it's not tabluar data - so is there a CSS trick to do this?
Yes the arrows are images, and using float was a good idea, but unfortunately it made the div go to 100% wide with the arrows waaaaaaay over on the right. I feel like there must be a simple answer and I'll kick myself when I see it, but I just can't think of it.