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/horizo​​ntal_master。嗯