div被推倒了

Question

嘿伙计们我正在建立一个网站，但出于某种原因，我的div标签在离开窗户时被推倒了。例如，这是我的导航。

然后当我使浏览器窗口变小时，就会这样做。

这些是与导航有关的属性。

.navigation_container {
margin: 0;
padding: 0;
position: relative;
padding-top: 30px;
}

.navigation {
height: 40px;
color: #FFFFFF;
font-size: 15px;
list-style: none;
}

.link {
height: 10px;
float: left;
position: relative;
margin-top: 15px;
margin-left: 15px;
text-decoration: none;
}

.link_a {
text-decoration: none;
padding: 10px;
}

也是我想要它的人的Html代码。

                <div class="navigation_container">
                    <div class="navigation">
                        <li class="link"><a class="link_a current" href="">Home</a></li>
                        <li class="link"><a class="link_a" href="">Features</a></li>
                        <li class="link"><a class="link_a" href="">Contact</a></li>
                        <li class="link"><a class="link_a" href="">Link1</a></li>
                        <li class="link"><a class="link_a" href="">Link2</a></li>
                    </div>
                </div>

任何帮助，为什么会发生这种情况将不胜感激。

感谢。

Answer 1

你没有发布任何你的html，所以在黑暗中点了一下，但是指定一个最小宽度以防止它们被包裹。

.navigation_container {
   min-width: somepx;
   margin: 0;
   padding: 0;
   position: relative;
   padding-top: 30px;
}

Answer 2

我建议不要在导航栏中使用div，而是使用水平列表。更少的HTML，更清晰的代码。

以下是一个示例：http://css.maxdesign.com.au/listutorial/horizontal_master.htm