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: ```

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

``` CSS: ``` .alphabet { float: left; list-style-type: none; margin-top:90px; pa…

Accepted Answer

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.

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

Solution

Problem