gpt4 book ai didi

html - 奇怪的 css 行为 - 图像内联不在下方

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

我的网站页脚有一个 Twitter/Facebook 标志。

我的页面代码是:

<div class="layout-cell" style="width: 50%">
<a href="https://www.facebook.com/pages/mysite/" target="_blank" class="facebook-tag-icon"></a>
<a href="https://www.twitter.com/mysite" target="_blank" class="twitter-tag-icon"></a>
</div>

我的 CSS 是:

.facebook-tag-icon {
background: url('mysite.co.uk/fb-off.png') no-repeat scroll;
min-height:32px;
min-width:32px;
display: block;
margin: 5px;
float: right;
}

.facebook-tag-icon:hover {
background: url('http://mysite.co.uk/fb_on.png') no-repeat scroll;
}

.twitter-tag-icon {
background: url('http://mysite.co.uk/twitter_off.png') no-repeat scroll;
min-height:32px;
min-width:32px;
display: block;
margin: 5px;
float: right;
}

.twitter-tag-icon:hover
{
background: url('http://mysite.co.uk/twitter_on.png') no-repeat scroll;
}

我希望我的 Facebook 图标显示在我的 Twitter 图标之上,但是它们目前并排显示在同一行上...如何让它们相互重叠显示?

最佳答案

clear: both; 添加到 twitter 图标:

.facebook-tag-icon {
background: url('https://www.gravatar.com/avatar/87941b98d114974b269cd65f361b605b?s=32&d=identicon&r=PG&f=1') no-repeat scroll;
min-height:32px;
min-width:32px;
display: block;
margin: 5px;
float: right;
}

.twitter-tag-icon {
background: url('https://www.gravatar.com/avatar/87941b98d114974b269cd65f361b605d?s=32&d=identicon&r=PG&f=1') no-repeat scroll;
min-height:32px;
min-width:32px;
display: block;
margin: 5px;
float: right;
clear: both;
}
<div class="layout-cell" style="width: 50%">
<a href="https://www.facebook.com/pages/mysite/" target="_blank" class="facebook-tag-icon"></a>
<a href="https://www.twitter.com/mysite" target="_blank" class="twitter-tag-icon"></a>
</div>

关于html - 奇怪的 css 行为 - 图像内联不在下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26350863/

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