为什么我的标题会干扰我的超链接？

Question

由于某种原因，我每次尝试添加我的#menubarheader<h1>时，我的#menu<a>正在移动到不同的位置。当谈到html和css时，我相当了解，但我无法找到解决这个问题的方法。这是我的代码，请帮助。

HTML：

<div id="right"> 
    <div id="menubar"> 
     <h1 id="menubarheader">Latest News</h1> 
     <a href="#menu" id="button">&#8801;</a> 
    </div> 
</div> 

CSS：

#menubar { 
    width: 100%; 
    background-color: maroon; 
    height: 80px; 
    line-height: 80px; 
} 
#button { 
    color: black; 
    font-size: 4em; 
    text-decoration: none; 
    font-weight: lighter; 
    padding: 0px; 
    vertical-align: middle; 
    float: left; 
} 
#menubarheader { 
    text-align: center; 
    color: white; 
    vertical-align: middle; 
    font-weight: lighter; 
    font-size: 32px; 
} 

我想知道如果行高是什么问题？但我想保持行高，因为我需要这些儿童垂直对齐。我正在使用PhoneGap制作Android应用程序，因此如果有人能够提供帮助，我们将非常感谢。先谢谢你！

Answer 1

我将id - menubar设置为相对值，将id的button和menubarheader设置为绝对值。我相信这就是你要找的。这里是的jsfiddle：>>>CLICK HERE<<<

HTML：

<div id="right"> 
    <div id="menubar"> 
     <h1 id="menubarheader">Latest News</h1> 
     <a href="#menu" id="button">&#8801;</a> 
    </div> 
</div> 

CSS：

#menubar, #menubarheader { 
    width: 100%; 
    height: 80px; 
} 
#menubar { 
    min-width: 250px; 
    position: relative; 
    background-color: maroon; 
} 
#button, #menubarheader { 
    position: absolute; 
    vertical-align: middle; 
    font-weight: lighter; 
} 
#button { 
    padding: 0px; 
    text-decoration: none; 
    font-size: 4em; 
    color: black; 
} 
#menubarheader { 
    text-align: center; 
    color: white; 
    font-size: 32px; 
}