如何创建一个跨越整个div宽度的字母表字母选择器

Question

我正在创建一个网站,需要通过信件过滤联系人.

我将使用包含字母表中每个字母的水平条

我目前正在使用带有内联函数的ul和li来显示带有边框的图像,以创建字母分割.

我的问题是,当将浏览器中的缩放从100%更改为任何其他值时,字母会改变大小,因此会丢弃div的居中,有时甚至会下降到下一行.

如何创建一个字母列表,这些字母将在包含div上紧密,并且在分辨率和缩放变化时不会被破坏

网站代码:

<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

我不得不在CSS中进行相当多的更改,因为它不仅仅是jsFiddle无法识别的格式(使用嵌套元素和@符号等),而且它不会使您的列表居中.

无论如何,这是我认为你追求的结果:

.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;
}

小提琴

如果你想知道3.84%来自哪里,那就是100%除以26.

现在它有一个问题:当你使窗口太窄时,列表项都会随之缩小,从而产生一大堆乱七八糟的字母.
为了防止这种情况,您可以min-width:1em在CSS中添加或者使用某些内容,以便在需要时将它们包装到多行.