gpt4 book ai didi

html - 图像未正确排列

转载 作者:行者123 更新时间:2023-11-28 16:10:08 25 4
gpt4 key购买 nike

我正在尝试创建一个图像列表(充当链接),当悬停在上面时会亮起。但是,添加 <div class="hover">到每张图片的开头都会阻止它们在水平行中显示。我该如何修复它才能使其水平排列?

.hover {
opacity: 0.6;
filter: alpha(opacity=60);
}

.hover:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
<body bgcolor="#000000">

<ul class="list-inline">
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/youtube-active.png" height="39px" width="99px"></div></li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitter-active.png" height="56px" width="56px"></div></li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/facebook-active.png" height="56px" width="56px"></div></li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/soundcloud-active.png" height="56px" width="72"></div></li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/googleplus-active.png" height="56px" width="56px"></div></li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/steam-active.png" height="56px" width="56px"></div></li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitch-active.png" height="56px" width="56px">
</div></li>

对于任何糟糕的代码或令人困惑的问题,我深表歉意,这是我的第一篇文章。

谢谢

最佳答案

默认情况下,div 是 block 级元素并占用尽可能多的宽度,因此通过将 display: inline; 添加到您的悬停类中,将显示从 block 更改为内联:

.hover {
opacity: 0.6;
filter: alpha(opacity=60);
display: inline;
}
.hover:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
<body bgcolor="#000000">

<ul class="list-inline">
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/youtube-active.png" height="39px" width="99px">
</div>
</li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitter-active.png" height="56px" width="56px">
</div>
</li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/facebook-active.png" height="56px" width="56px">
</div>
</li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/soundcloud-active.png" height="56px" width="72">
</div>
</li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/googleplus-active.png" height="56px" width="56px">
</div>
</li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/steam-active.png" height="56px" width="56px">
</div>
</li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitch-active.png" height="56px" width="56px">
</div>
</li>

另一种选择是使用 float:left 使 .hover div 向左浮动:

.hover {
opacity: 0.6;
filter: alpha(opacity=60);
float:left;
}
.hover:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
<body bgcolor="#000000">

<ul class="list-inline">
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/youtube-active.png" height="39px" width="99px">
</div>
</li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitter-active.png" height="56px" width="56px">
</div>
</li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/facebook-active.png" height="56px" width="56px">
</div>
</li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/soundcloud-active.png" height="56px" width="72">
</div>
</li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/googleplus-active.png" height="56px" width="56px">
</div>
</li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/steam-active.png" height="56px" width="56px">
</div>
</li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitch-active.png" height="56px" width="56px">
</div>
</li>

关于html - 图像未正确排列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38488311/

25 4 0
文章推荐: javascript - 使用 jQuery 更新
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com