How to create an alphabet letter selector that spans the entire width of a div

Question

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

i will use a horizontal strip containing each letter in the alphabet

I am currently using ul and li with a built-in function to display images with a frame on the right to create letter divisions.

My problem is that when you change the scale in the browser from 100% to any other value, the letters change their size and, therefore, throw out the centering of the div, sometimes even drop to the next line.

How to create a list of letters that will be hard on the containing div, and will not be broken when changing the resolution and scaling.

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 your CSS a bit, because it was not only in a format that jsFiddle did not recognize (with nested elements and @ signs and all), but also did not center your list.

In any case, here is the result that I think you need:

 .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 3.84% comes from, then it's just 100% divisible by 26.

Now he has a problem: when you make the window too narrow, the list items are all compressed with it, creating a big mess of letters.
To prevent this from happening, you can put min-width:1em or something in CSS for li so that they can wrap over multiple lines if necessary.