html - 当我关闭浏览器窗口而不是简单地消失时，导航栏中的图像会落在彼此下方。为什么？

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 标签。