how to create an alphabet letter selector that spans an entire div width

Question

I am creating a website and need to filter contacts by letter.

i will be using a horizontal bar containing each letter in the alphabet

I am currently using a ul and li with the inline function to display the images with a border right to create the letter divisions.

My issue is that when changing zoom in the browser from 100% to any other value the letters change size and therefore throw out the centering of the div, sometimes even going down to the next line.

How do i create a list of letters that will be tight on the containing div and not be broken when resolution and zoom change

SITE CODE:

<ul class="alphabet">
                        <li>A</li>
                        <li>B</li>
                        <li>C</li>
                        <li>D</li>
                        <li>E</li>
                        <li>F</li>
                        <li>G</li>
                        <li>H</li>
                        <li>I</li>
                        <li>J</li>
                        <li>K</li>
                        <li>L</li>
                        <li>M</li>
                        <li>N</li>
                        <li>O</li>
                        <li>P</li>
                        <li>Q</li>
                        <li>R</li>
                        <li>S</li>
                        <li>T</li>
                        <li>U</li>
                        <li>V</li>
                        <li>W</li>
                        <li>X</li>
                        <li>Y</li>
                        <li>Z</li>
                    </ul>

CSS:

.alphabet {
                float: left;
                list-style-type: none;
                margin-top:90px;
                padding:0px;
                cursor: pointer;
                width: 100%;

                li {
                    padding:0px;
                    border-right:1px solid @darkgrey;
                    font-size: 13px;
                    text-align: center;
                    padding-left: 3px;
                    padding-right: 3px;
                    color:black;
                    display:inline;
                }

                li:last-child {
                    border:none;
                    padding-right: 0px;
                }

                li:hover {
                    color:@green;
                    background-color: @lightgrey;
                }
            }

Answer 1

I had to change quite a bit in your CSS, because not only was it in a format that jsFiddle did not recognise (with the nested elements and the @ signs and all) but also did it not center your list.

Anyway, here is the result that I think you're after:

.alphabet {
    list-style-type: none;
    margin:90px auto 0;
    padding:0;
    cursor: pointer;
    width:80%;
    text-align:center;
}

.alphabet li {
    float:left;
    margin:0;
    padding:0;
    border-right:1px solid darkgrey;
    font-size: 13px;
    -moz-box-sizing:border-box;
    color:black;
    display:inline-block;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:3.84%;
}

.alphabet li:last-child {
    border-right: none;
}

.alphabet li:hover {
    color:green;
    background-color: lightgrey;
}

Fiddle

And if you're wondering where the 3.84% comes from, that's simply 100% divided by 26.

Now it has a problem: when you make the window too narrow, the list items all shrink with it, creating a big jumble of letters.
To prevent that, you can put min-width:1em or something in the CSS for the li, so that they will wrap to more than one line if needed.