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设置为relative，将id button和menubarheader设置为absolute。我相信这就是你要找的东西。这是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;
}

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

1 个答案: