个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我遇到了有关页脚中 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: 15px。 a 标签中包含的所有内容都是可点击的。这是预期的行为。
在您的情况下，您不会这样做。因此，您应该将 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
我是一名优秀的程序员,十分优秀！