divs被推下来

嘿家伙我正在做一个网站，但由于某种原因，我的div标签被推下来，当他们离开窗户。例如，这是我的导航。divs被推下来

enter image description here

然后，当我让浏览器窗口小它这样做。

enter image description here

这些都是做的导航属性。

.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>

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

谢谢。

来源

2012-01-28 Duncan Palmer

你想要发生什么？这是默认行为。 – Blender 2012-01-28 05:55:06

我希望它保持它的位置或消失。 – 2012-01-28 05:56:24

然后你需要'min-width'。 – Blender 2012-01-28 05:59:59

你没有发布你的HTML，所以在黑暗中的镜头位置，但指定一个最小宽度，以防止它们缠绕。

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

来源

2012-01-28 05:56:43 mrtsherman

我现在发布了html代码。 – 2012-01-28 05:57:49

好的，谢谢你的建议！而不是将最小宽度放入导航容器中，而是将其放在整个标题上，它似乎可以工作。非常感谢。 – 2012-01-28 06:00:51

@DuncanPalmer - 是的，只是设置一个最小宽度。我可能会做导航，而不是navigation_container。只要确保所有按钮的最小宽度足够宽。 – mrtsherman 2012-01-28 06:00:59

我会建议您不要使用div作为导航栏，而是使用水平列表。较少的HTML，更干净的代码。

这里是一个例子：http://css.maxdesign.com.au/listutorial/horizontal_master.htm

来源

2012-01-28 06:14:36

回答

相关问题