爲什麼我的標題會干擾我的超鏈接？

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