gpt4 book ai didi

html - 在无序列表中垂直居中超链接时出现问题

转载 作者:太空宇宙 更新时间:2023-11-04 05:15:01 25 4
gpt4 key购买 nike

我正在使用以下(简化的)代码在 UL 中垂直居中超链接。我知道我将样式应用于超链接而不是 li 可能看起来很奇怪,但我要求整个列表元素都是可点击的。

我的代码按预期工作,但是正如您在此 jsFiddle 上看到的那样垂直居中有点偏离

谁能告诉我这是为什么?提前致谢。

HTML

<ul>
<li>
<a href="/">
<label>Foo</label>
<span>Bar</span>
</a>
</li>
</ul>

CSS

ul
{
list-style: none;
}

ul
{
height: 100px;
line-height: 100px;
}

li, li a
{
display: inline-block;
}

li a
{
line-height: 18px;
padding: 5px 10px;
color: #FFF;
text-decoration: none;
}

li label
{
float: left;
}

li span
{
float: right;
}

最佳答案

“ul”上的行高是上下移动链接的原因,如果将其增加到大约 120 像素,它会居中。

关于html - 在无序列表中垂直居中超链接时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8381257/

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