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

概述我正在创建一个网站,需要通过信件过滤联系人. 我将使用包含字母表中每个字母的水平条 我目前正在使用带有内联函数的ul和li来显示带有边框的图像,以创建字母分割. 我的问题是,当将浏览器中的缩放从100％更改为任何其他值时,字母会改变大小,因此会丢弃div的居中,有时甚至会下降到下一行. 如何创建一个字母列表,这些字母将在包含div上紧密,并且在分辨率和缩放变化时不会被破坏 网站代码： <ul cl 我正在创建一个网站,需要通过信件过滤联系人.

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

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

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

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

网站代码：

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

解决方法 我不得不在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的CSS中放入min-wIDth：1em或者其他东西,这样如果需要它们会包装到多行.

总结

以上是内存溢出为你收集整理的html – 如何创建跨越整个div宽度的字母表字母选择器全部内容，希望文章能够帮你解决html – 如何创建跨越整个div宽度的字母表字母选择器所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。