html - CSS 设置图形不可点击

Question

为什么我不能点击我的图形？

HTML:

<div class="column-right-social">

    <ul>
        <li id="facebook"><a href="#"></a></li>
        <li id="twitter"><a href="http://www.twitter.com/"></a></li>
        <li id="mail"><a href="/contact-us"></a></li>
    </ul>

</div>

CSS:

.column-right-social ul{
    width:250px;
    margin:0px;
    padding:0px;

}

.column-right-social ul li{
    width:80px;
    height:80px;
    list-style-type:none;
    float:left;
}

.column-right-social #facebook{
    background:url('../image/facebook.png') no-repeat;

}

.column-right-social #twitter{
    background:url('../image/twitter.png') no-repeat;

}

.column-right-social #mail{
    background:url('../image/mail.png') no-repeat;

}

Answer 1

背景不可点击。你的<a>标签没有内容，因此浏览器会将它们呈现为 0x0(又名不可见)区域。您需要在 <a> 上设置一些高度/宽度元素也是如此。