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-index和其他属性，但没有任何工作。我有点想知道它是否与内联定位/显示有关。

Answer 1

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

Answer 2

这些链接对我没有任何帮助。你甚至不需要span。您可以将课程移至<a并拥有2（社交和Facebook），或者只使用内联和边距将其设为一个css。

<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：）

如何超链接包含图像的范围

3 个答案: