3

私は以下を作成しました：

        <div style="margin-top: 1.2em">
            <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>
            <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-th icon-4x"></i>
            <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-cog icon-4x"></i>
        </div>

これらのアイコンのいずれかまたはその下の単語をクリックすると、リンクに移動する方法を教えてもらえますか?

私がやりたいのは、アイコンが次のように表示されるようにすることです。

 xxxxxx     xxxxxx     xxxxxx
 xxxxxx     xxxxxx     xxxxxx
 xxxxxx     xxxxxx     xxxxxx

  Home       Admin     Setting

そのため、アイコンの上部から下の単語の下部までの任意の場所をクリックすると、次をクリックするのと同じになります。

 <a href="/home">Home</a>
 <a href="/admin">Admin</a>
 <a href="/setting">Setting</a>

リンク。

アップデート

おそらく、DIV を使用するソリューションが必要だと思います。与えられた両方の回答を試しましたが、どちらもアイコンが縦に表示されます。また、同じリンクに対して複数のhrefがあるため、2番目の答えはおそらく考えられません。誰かが別の答えを手伝ってくれることを願っています。

4

3 に答える 3

6

div は必要ありません。このようなものがうまくいくはずです。フィドル

<a href="/home" class="icon-block">
    <i class="icon-home icon-4x"></i>
    <span>Home</span>
</a>
<a href="/admin" class="icon-block">
    <i class="icon-th icon-4x"></i>
    <span>Admin</span>
</a>
<a href="/settings" class="icon-block">
    <i class="icon-cog icon-4x"></i>
    <span>Settings</span>
</a>

CSS

a.icon-block {
        display:inline-block;
        width:10em;
        float:left;
        text-align:center;
    }

    a.icon-block i,
    a.icon-block span {
        display:block;
        width:100%;
        clear:both;
    }
于 2013-09-02T06:00:28.130 に答える
2

試す：

<div style="margin-top: 1.2em">
    <a href="/home">
        <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>
        <br />
        <span class="normal">Home</span>
    </a>
    <a href="/admin">
        <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-th icon-4x"></i>
        <br />
        <span class="normal">Admin</span>
    </a>
    <a href="/setting">
        <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-cog icon-4x"></i>
        <br />
        <span class="normal">Setting</span>
    </a>
</div>

そして、CSS で、.normal クラスに別のフォント ファミリを指定します。

.normal{
    font-family: "Your Font";
}
于 2013-09-01T17:04:32.710 に答える