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

Question

我的网站页脚有一个 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 图标之上，但是它们目前并排显示在同一行上...如何让它们相互重叠显示？

Answer 1

将 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>