Question

我的HTML非常简单：

<div class="navigation">
    <li><a id="button" href="#" <img src=""></a></li>
    <li><a id="button2"  href="#" <img src=""></a></li>
    <li><a id="button3"  href="#" <img src=""></a></li>
</div>

我的css是：

.navigation {
margin-top:35px;
margin-left: -290px;
list-style-type: none;
}

.navigation li{
display: inline;
}

#button, #button2, #button3 {

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
padding: 30px;
float: left;
margin-left: 390px;
}

#button{
 background-image: url("../images/homebutton.png");
}
#button2 {
background-image: url("../images/gmailbutton.png");
background-repeat: no repeat;
}
#button3 {
background-image: url("../images/blogbutton.png");
}

现在，当浏览器窗口打开时看起来很好，但是当我关闭窗口时，图像会垂直堆叠而不是在窗口翻转时消失。有任何想法吗？？？谢谢:)

Answer 1

假设您将.navigation元素更改为ul或ol（有效性很重要），那么您只需添加：white-space: nowrap;即可将元素强制为全部出现在一行上，而不是包装（作为inline元素自然会，并且应该）：

.navigation {
    margin-top:35px;
    margin-left: -290px;
    list-style-type: none;
    white-space: nowrap;
}

JS Fiddle proof-of-concept

请注意更正后的a和img代码。

当我关闭浏览器窗口而不是简单地消失时，导航栏中的图像会低于对方..为什么？

1 个答案: