当前位置: 动力学知识库 > 问答 > 编程问答 >

html - How to hyperlink a span that contains an image

问题描述:

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;

}

The way I'm going about it could possibly be the wrong way. Any direction/advice would be great. I've tried using z-index and other properties but just nothing is working. I kinda wonder if it has to do with positioning/display inline.

网友答案:

The links worked for me with no trouble. You don't even need the span. You can move the class to the <a and have either 2 (social & facebook), or just make it to one css each with the inline and margin.

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

A <span> should not contain any display:block elements anyway, it was designed for inline content although you can use it your way. Try use the <img> tag instead. And wrap all your lines inside lis because you are using an ul

网友答案:

A span can have display:block property, but why you add span if you have your link ? I cleaned up your 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>

and 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;
}

I removed properties repetition and add a little bit of OOCSS :)

分享给朋友:
您可能感兴趣的文章:
随机阅读: