gpt4 book ai didi

css - 悬停时如何更改图标列表的对齐方式

转载 作者:太空宇宙 更新时间:2023-11-04 04:53:50 26 4
gpt4 key购买 nike

我在对齐图标列表时遇到了一些问题。

从下图中可以看出,有一个图标列表。悬停时,当前图标会自行放大。

我想做的是,改变当前图标放大的方向。我希望列表按照图片右侧显示的方式对齐。

代码如下:

HTML code:
<div class="bar">
<li>
<a href=""><img src="..." /></a>
<a href=""><img src="..." /></a>
<a href=""><img src="..." /></a>
<a href=""><img src="..." /></a>
<a href=""><img src="..." /></a>
</li>
</div>


CSS code:
.bar {
position: absolute;
left: 5px;
width: 35px;
height: auto
}

.bar li a img {
position: relative;
height: 30px;
width: 30px;
padding-top: 4px;
padding-bottom: 4px
}

.bar li a:hover img {
position: relative;
height: 50px;
width: 50px
}

enter image description here

最佳答案

bar li a img {
float: right;
}

应该可以解决问题。你能为你的问题创建一个 jsFiddle 吗?

关于css - 悬停时如何更改图标列表的对齐方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12872259/

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