gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 15:46:08 32 4
gpt4 key购买 nike

我正在创建一个网站,需要按字母过滤联系人。

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

enter image description here

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

我的问题是,当将浏览器中的缩放比例从 100% 更改为任何其他值时,字母会改变大小,因此会导致 div 居中,有时甚至会向下移动到下一行。

enter image description here

我如何创建一个字母列表,这些字母将紧贴包含的 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;
}
}

最佳答案

我不得不对您的 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 或其他内容,以便在需要时它们可以换行。

关于html - 如何创建一个跨越整个 div 宽度的字母选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17696778/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com