0

我想使用一些图标作为链接，并在每个图标下方都有文本链接，但我似乎不知道该怎么做。所以每个图标和文本链接都有效。链接到 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;
}
4

1 回答 1

0

像这样的东西？

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

更新：我更改了小提琴，使文本位于下方并且图标可点击，但下方的文本不可点击。因为您有列表锚标记的样式，它会影响文本，所以唯一的选择是将文本保留li在a. 你可以在这里看到它。如果您希望文本可点击，您可能必须制作一个单独的 div 以放置在列表图标下方，可能有更好的方法，但这是我能想到的最好的方法。

于 2013-08-01T08:54:41.857 回答