gpt4 book ai didi

html - 为什么我的页脚 Logo 包括左边距?

转载 作者:太空宇宙 更新时间:2023-11-03 17:29:49 24 4
gpt4 key购买 nike

我遇到了有关页脚中 Logo 的问题。我的页脚中有四个 Logo (Pinterest Logo 、Facebook Logo 、Twitter Logo 和 Google+ Logo )。四个 Logo 中的每一个都链接到单独的网页但是,我不明白为什么也可以单击 Logo 之间的空白区域(margin-left:15px)。如果有人能解释为什么会发生这种情况以及我如何解决这个问题(只有单击 Logo 才能访问链接,而不是中间的空白区域),我们将不胜感激。先感谢您。

这是相关的 HTML 代码:

<body> 
<div id="footer">
<div id="footerlogos">
<a href="https://www.pinterest.com/fwtemplates/" target="_blank">
<img src="http://s8.postimg.org/9rkvn5myp/pinteresticon.png" alt="pinterest icon" height="22px"/>
</a>
<a href="https://www.facebook.com/freewebsitetemplates" target="_blank">
<img src="http://s1.postimg.org/xbrb5tse3/facebookicon.png" alt="facebook icon" height="22px"/>
</a>
<a href="https://twitter.com/fwtemplates" target="_blank">
<img src="http://s10.postimg.org/z4hzkw8xh/twittericon.png" alt="twitter icon" height="22px"/>
</a>
<a href="https://plus.google.com/118363260425872001433" target="_blank">
<img src="http://s2.postimg.org/63vc1sv8l/google_icon.png" alt="google+ icon" height="22px"/>
</a>
</div>
</div>
</body>

这是相关的 CSS:

#footer {
width: 100%;
height: 50px;
background-color: #999999;
border-bottom: 1px solid black;
padding-right: 20px;
padding-left: 20px;
clear: both;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#footerlogos {
height: 100%;
line-height: 45px;
display: inline-block;
float: right;
}

#footerlogos img {
opacity: 0.6;
vertical-align: middle;
margin-left: 15px;
}

#footerlogos a:link {
text-decoration: none;
}

这是一个只有相关 HTML 和 CSS 的 JSFiddle 链接:https://jsfiddle.net/kqwm5m45/

最佳答案

因为您的可点击元素是 img,它有一个 margin-left: 15pxa 标签中包含的所有内容都是可点击的。这是预期的行为。

在您的情况下,您不会这样做。因此,您应该将 margin-left: 15px#footerlogos img 移到 #footerlogos a

#footerlogos a {
margin-left: 15px;
}

#footerlogos img {
opacity: 0.6;
vertical-align: middle;
}

关于html - 为什么我的页脚 Logo 包括左边距?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30818689/

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