如何超链接包含图像的跨度

Question

HTML:

    <footer>
    <div class="foot">
    <ul>
            <a href="https://www.facebook.com/" class="social"><span class="facebook"></span></a>
            <a href="instagram" class="social"><span class="instagram"></span></a>
    </ul>
    </div>
    </footer>

CSS：

    .facebook {
    display:block;
    background-image:url("../images/facebook.png");
    height:64px;
    width:64px;
}
.instagram {
    display:block;
    background-image:url("../images/instagram.png");
    height:64px;
    width:64px;
}
.social {
    height:64px;
    width:64px;
    display:inline-block;
    position:relative;
    margin:0 auto;
}
footer {
    height:75px;
    width:inherit;
    bottom:0;
    position:fixed;
}
.foot {
    text-align:center;
}

我的做法可能是错误的。任何指导/建议都很好。我尝试过使用z索引和其他属性，但都不起作用。我有点怀疑这是否与内联定位/显示有关。

Answer 1

<span>无论如何都不应该包含任何display:block元素，它是为内联内容设计的，尽管您可以按自己的方式使用它。请尝试使用<img>标记。并将所有行包装在lis中，因为您使用的是ul

Answer 2

这些链接对我来说毫无问题。你甚至不需要span。您可以将类移动到<a，并具有2(social&facebook(，或者只将其设置为一个css，每个css带有inline和margin。

<a href="https://www.facebook.com/" class="social facebook"></a>
<a href="instagram" class="social instagram"></a>

Answer 3

span可以具有display:block属性，但如果您有链接，为什么要添加span？我清理了你的html：HTML

<footer class="foot">
    <ul>
        <li><a href="https://www.facebook.com/" class="social social-facebook"></a></li>
        <li><a href="instagram" class="social social-instagram"></a></li>
    </ul>
</footer>

和CSS

.social-facebook {
    background-image:url("../images/facebook.png");
}
.social-instagram {
    background-image:url("../images/instagram.png");
}
.social {
    height:64px;
    width:64px;
    display:block;
    margin:0 auto;
}
.foot {
    height:75px;
    width:inherit;
    bottom:0;
    position:fixed;
    text-align:center;
}

我删除了属性重复，并添加了一点OOCSS：(