HTML/CSS：将链接元素定位在另一个Div内的Div

Question

对不起/令人困惑的主题！我正在玩耍并试图制作一个简单的菜单栏。我希望我的页面在一个wrapper-div中。但是，当我将位置从绝对位置改为其他位置时，我的菜单栏会改变样式，看起来真的很笨拙。

这里是什么样子：http://jsfiddle.net/2rEkh/

我希望它看起来像：http://jsfiddle.net/rNmsP/

但我不能使用的位置是：绝对的;因为它不会留在我的warpper-div中。而使用相对或任何其他使它看起来很丑。

任何指针，我需要做的，使它看起来像第二个链接，而不使用绝对？

在此先感谢。

Answer 1

您的导航栏是不正确的包裹浮动元素。只需在您的#wd-navbar中添加display: inline-block;，它应该会很好玩。

Answer 2

尝试在navbar div中添加一些高度： ＃wd-navbar { height：40px; }

这应该给你想要的样子（没有摆脱的位置：绝对）...

Answer 3

试试这个; check it out

浮动wd-navbar的容器必须溢出隐藏。否则容器元素会collepses

#wrapper { 
    margin: 0 auto; 
    text-align: left; 
    margin-bottom: 5px; 
} 

#wd-navbar{ 
background-color: #25BAFA; 
border-bottom: 2px solid #ccc; 
background: #25BAFA;color: #000000;overflow:hidden;} 

Answer 4

尝试玩这个：

#wd-navbar{ 
... 
float:right; 
... 
} 

Answer 5

试试这个？

http://jsfiddle.net/rNmsP/1/

#wd-navbar li a{ 
display: block; 
background-color: #25BAFA; 
border-radius: .3em; 
padding: .5em; 
text-decoration: none; 
color: white; 
width:25px; 
height:20px; 
} 

#wd-navbar li ul{ 
display: none; 
position: relative; 
top: 0px; 
padding: 0; 
} 

编辑：

还添加此为导航栏高度

#wd-navbar{ 
top 0; 
left: 0; 
width: 100%; 
background-color: #25BAFA; 
border-bottom: 2px solid #ccc; 
background: #25BAFA; 
color: #000000; 
height:40px; 
}