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。希望有人可以提供另一个答案。

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 回答
1

试试这个 Div 版本。

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

和CSS类

go-middle{ text-align:center;}
go-inline { display:inline-block; vertical-align:top;}

P/秒。一些 css/div 结构编辑会很好。尝试用自己的风格构建它。=D

于 2013-09-02T01:52:04.360 回答