如何创建一个跨越整个 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;
}

Fiddle

如果您想知道 3.84% 的来源，那就是 100% 除以 26。

现在它有一个问题：当您将窗口设置得太窄时，列表项都会随之缩小，从而产生一大堆字母。
为防止这种情况，您可以在 li 的 CSS 中添加 min-width:1em 或其他内容，以便在需要时将它们换成多行。