Building an alphabet bar

I need some HTML/CSS guidance. My goal is to create a contacts list screen in my app, and like most contacts list screens, users should be able to pick a letter the name starts with, and the app will filter to that letter. Easy enough.

How I'd like the UI to look is something like this:

Find by Name | all # a b c d e f g h i j k l m n o p q r s t u v w x y z

Where everything to the right of the | is a clickable link.

My problem is that I've got a dynamic width UI, and I'd like the bar to take up the whole width of the users browser even as they resize--so the letter z should be on the far right end. I'd like for there to be even spacing between the letters.

The "Find by Name" text can in another module could read: "Find by Street Name", so that isn't fixed width either.

How is this best accomplished in css/html? If it matters, 开发者_如何学Goi'm not using a fixed width font.

Put each letter in an element with a width of 3.8% (100/26).

The drawback to that is you'll run into some odd rounding issues in some browsers.

Personally, I wouldn't try to make them span the entire width. The way you have now seems to be visually proper.