CSS Sprites和Anchors

Question

我想使用一些图标作为链接，并在每个图标下面都有文字链接，但我似乎无法弄清楚如何做到这一点。因此每个图标和文本链接都有效。 链接到jsfiddle：http://jsfiddle.net/huwrowlands/jvMfY/

有人可以证明我的方式错误。

提前致谢

<ul class="i-icons">            
 <li class="i-icon-va tablet-grid-33 mobile-grid-50"><a href="#">Vehicle Accidents</a></li>
 <li class="i-icon-pi tablet-grid-33 mobile-grid-50"><a href="#">Personal Injury</a></li>           
</ul>

#homepage-header ul.i-icons {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: center;
}

#homepage-header ul.i-icons li {
    /*text-indent: -9999em;*/
    display: inline-block;
    width: 140px;
    height: 140px;
    background-image: url('http://inspiredworx-labs.com/sites/injury-icons.png');
    background-repeat: no-repeat;
    position: relative;
    margin: 10px 10px 20px 10px;
}

    #homepage-header ul.i-icons li.i-icon-va {
        background-position: 0 -1px;
    }

    #homepage-header ul.i-icons li.i-icon-pi {
        background-position: -155px -1px;
    }   

#homepage-header ul.i-icons li a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    color: #fff;
    font-size: 14px;
    font-size: 1.4rem;
    text-decoration: none;
}

Answer 1

类似于this？

我只是将top属性添加到#homepage-header ul.i-icons li a并更改了字体颜色，以便您可以阅读

更新：我更改了小提琴，以便文本位于下面，图标可点击，但下面的文字无法点击。由于您具有列表锚标记的样式，因此它影响了文本，因此唯一的选择是将文本保留在li内但在a之外。你可以看到它here。如果你想让文字可以点击，你可能需要在列表图标下面设置一个单独的div，可能有更好的方法，但这是我能想到的最好的方法。