HTML/CSS：将 Div 中的链接元素放置在另一个 Div 中

Question

抱歉这个奇怪/令人困惑的话题！我正在尝试制作一个简单的菜单栏。我希望我的页面位于包装器 div 内。但是当我将位置从绝对位置更改为其他位置时，我的菜单栏会改变样式并且看起来非常愚蠢。

它看起来像这样：http://jsfiddle.net/2rEkh/

我希望它看起来像：< a href="http://jsfiddle.net/rNmsP/" rel="nofollow">http://jsfiddle.net/rNmsP/

但我不能使用position:absolute;因为那样它就不会留在我的 warpper-div 内。使用亲戚或任何其他方式会使它看起来很丑陋。

有任何指示我需要做什么才能使其看起来像第二个链接，而不使用绝对？

提前致谢。

Answer 1

尝试为导航栏 div 添加一些高度：
#wd-导航栏{
高度：40px；
这

应该给你想要的外观（不摆脱位置：绝对）......

Answer 2

试试这个；
检查一下

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

#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 3

您的导航栏未正确包装浮动元素。只需将 display: inline-block; 添加到您的 #wd-navbar 即可，效果应该不错。

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;
}