gpt4 book ai didi

html - 如何在可变高度的列表中垂直对齐

转载 作者:行者123 更新时间:2023-11-28 16:06:32 24 4
gpt4 key购买 nike

我想在我的列表中垂直对齐我的 anchor 标记,但是有一个问题。

列表项的数量随我网站的页面数量而变化。所以我在列表上设置了 display flex,在列表项上设置了 flex: 1。每个列表项都包含一个 anchor 标记以重定向到该特定页面。它看起来很奇怪,因为它们垂直对齐到列表项的顶部(而列表项都具有相同的高度以填充 100% 的高度,感谢 flex)。

*,
*:after,
*:before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "Helvetica", sans-serif;
font-size: 2em;
}
div {
height: 100vh;
width: 100vw;
}
ul {
display: -webkit-flex;
display: flex;
flex-flow: column nowrap;
height: 100%;
list-style: none;
}
li:first-child {
background-color: #35CE93;
}
li:nth-child(2) {
background-color: #3A999F;
}
li:last-child {
background-color: #59ADEB;
}
li {
display: block;
-webkit-flex: 1;
flex: 1;
flex-direction: row-reverse;
width: 100%;
text-align: center;
}
a {
color: inherit;
text-decoration: none;
}
<div>
<ul>
<li>
<a href="#">test</a>
</li>
<li>
<a href="#">test</a>
</li>
<li>
<a href="#">test</a>
</li>
</ul>
</div>

一个解决方案是在 anchor 标记内有另一个跨度,并将 anchor 标记放在相对位置,并将跨度放在绝对位置。但我无法编辑列表的显示方式,因为我在不需要跨度的多个站点上使用它,否则它会出错。

我可以使用 jQuery 强制 span 进入列表项,但我宁愿不这样做。

更新添加这个会在电脑上修复它,但不会在 iPhone 上修复:

a {
color: inherit;
text-decoration: none;
display: inline-block;
vertical-align: middle;
height: 100%;
}
a:before {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}

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