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

Question

出于某种原因#menu <a>，每次我尝试添加我的#menubarheader <h1>. 我在 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;
}

我想知道线高是否是问题？但我想保持行高不变，因为我需要这些#menubar孩子垂直对齐。我正在使用 PhoneGap 制作一个 Android 应用程序，所以如果有人能提供帮助，将不胜感激。先感谢您！

Answer 1

我将 id - 设置menubar为相对，将 idbutton设置menubarheader为绝对。我相信这就是你要找的。这是JSFiddle： >>>点击这里<<<

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