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元素更改为 a ulor ol（有效性很重要），那么您可以简单地添加：white-space: nowrap;强制元素全部出现在一行上，而不是包装（作为一个inline元素自然会，并且应该）：

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

JS Fiddle 概念验证。

请注意更正a和img标签。