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

现在它有一个问题：当你使窗口太窄时，列表项全部缩小，造成一大堆字母。
为了防止这种情况，您可以在CSS中为{li}添加min-width:1em或其他内容，以便在需要时将它们包装到多行。