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 に答える