Question

我试图制作一个看起来像http://i.imgur.com/mWbEYhD.png的菜单。

但我最终得到了一个像http://i.imgur.com/DDeEyBr.png这样的菜单。

我该如何解决这个问题？

HTML

<header>
            <div id="logo">
                <h1>TecQ</h1>
            </div>
            <nav class="prime-menu">
                <ul>
                    <li><a class="on" href="index.html"><img src="img/icons/home.png">Home</a></li>
                    <li><a class="on" href="index.html"><img src="img/icons/home.png"></a></li>
                    <li><a class="on" href="index.html"><img src="img/icons/home.png"></a></li>
                    <li><a class="on" href="index.html"><img src="img/icons/home.png"></a></li>
                </ul>
            </nav>
        </header>

CSS

.prime-menu ul {
    list-style: none;
    }

.prime-menu ul li {
    margin-top: 2px;
    display: inline-block;
    }

.prime-menu ul li a{
    width: 140px;
    height: 140px;
    display: inline-block;
    font-size: 20px;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    background: #15161c;
    font-size: 12px;
    line-height: 140px; 
    }

.prime-menu ul li a img{
    }

.prime-menu ul li a:hover {
    background: #1c1d25;
    font-weight: 400;
    }

Answer 1

试试这个。将<br>放在src和文本之间。您的代码将如下所示。
<header>
<div id="logo">
<h1>TecQ</h1>
</div>
<nav class="prime-menu">
<ul> <li><a class="on" href="index.html"><img src="img/icons/home.png">Home</a></li>
<li><a class="on" href="index.html"><img src="img/icons/home.png"></a></li>
<li><a class="on" href="index.html"><img src="img/icons/home.png"></a></li>
<li><a class="on" href="index.html"><img src="img/icons/home.png"></a></li>
</ul>
</nav>
</header>

Answer 2

使用<p>或<span>等<p>Home</p>将文字换回家，然后将其position:absolute;并position:relative; <a>用于{{1}}

see jsfiddle link

Answer 3

将您的文字放在<p> <p style="position:absolute">Home</p>中，并使用position：relative;链接<a>link Name</a>

如何将文本放在菜单中的图像图标下？

3 个答案: