Question

代码在这里：https://jsfiddle.net/9ddmppdu（注意图片已更改为duane）

我正试图在悬停时显示文字但这个鬼空间一直显示在所有按钮上方。我查看了代码，没有看到这个问题的指标。

.primary {
    background-color: #4AF;
    color: white;
}
.secondary {
    background-color: #0C0 color: black;
}
nav {
    background-color: #AA8;
    border: 1px solid #CC3;
    border-radius: 0;
    height: 100px;
    width: 100% - 18px;
    padding: 9px;
    text-align: center;
}

body {
    width: 100%;
    min-height: 616px;
    margin: 10px 0px 0px -1px;
}

html {
    background-color: #159;
    /* Old browsers */
    background: -webkit-linear-gradient(#CDF, #8BF, #07F);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#CDF, #8BF, #07F);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#CDF, #8BF, #07F);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(#CDF, #6BF, #07F);
    /* Standard syntax */
}

.navblock {
    height: 100px;
    display: inline-block;
    text-align: center;
}

.navimg {
    height: 100px;
    border-radius: 5px;
    margin: 0px 5px;
}

.navlink {
    position: relative;
    top: -100px;
    display: none;
}

.navblock:hover .navlink {
    display: block;
}

<body>
    <nav>
        <div class="navblock">	<a href="index.html">
			<img class = "navimg" src = "http://whereduaneat.org/duane.gif">
		<p>
		<div class = "navlink">
			Home
		</div>
		</a>

        </div>
        <div class="navblock">
            <img class="navimg" src="http://whereduaneat.org/duane.gif">
            <p>
                <div class="navlink">About Us</div>
        </div>
        <div class="navblock">
            <img class="navimg" src="http://whereduaneat.org/duane.gif">
            <p>
                <div class="navlink">About Us</div>
        </div>
        <div class="navblock">
            <img class="navimg" src="http://whereduaneat.org/duane.gif">
            <p>
                <div class="navlink">About Us</div>
        </div>
        <div class="navblock">
            <img class="navimg" src="http://whereduaneat.org/duane.gif">
            <p>
                <div class="navlink">About Us</div>
        </div>
        <div class="navblock">
            <img class="navimg" src="http://whereduaneat.org/duane.gif">
            <p>
                <div class="navlink">About Us</div>
        </div>
        <div class="navblock">
            <img class="navimg" src="http://whereduaneat.org/duane.gif">
            <p>
                <div class="navlink">About Us</div>
        </div>
    </nav>
    <header></header>
    <main></main>
    <footer></footer>
</body>

Answer 1

您只需添加vertical-align:top即可。 inline-block元素的默认对齐方式为baseline，因此top或middle将是您的最佳选择。

.navblock {
    height: 100px;
    display: inline-block;
    text-align: center;
    vertical-align: top;
}

JSfiddle Demo

我应该指出，您可能需要修正一些未公开的p标记... p也不能包含div。

Answer 2

非常简单。

您需要的只是正确的定位。

演示： http://jsfiddle.net/9ddmppdu/5/

Html幽灵空间

3 个答案: