如何让<h2>元素与汉堡菜单<span>横向并排对齐？

要让"MENU"文字和汉堡图标横向对齐且保留原有菜单功能，只需调整以下布局设置：

修改后的完整代码 #

CSS

#menu__toggle {
    opacity: 0;
}
#menu__toggle:checked + .menu__btn > span {
    transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
    top: 0;
    transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
    top: 0;
    transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
    left: 0 !important;
}
.menu__btn {
    position: fixed;
    left: 20px;
    top: 20px; /* 固定垂直位置，可选 */
    width: auto; /* 自适应内容宽度，避免点击区域过宽 */
    height: auto;
    cursor: pointer;
    z-index: 1;
    display: flex; /* 启用flex实现横向对齐 */
    align-items: center; /* 垂直居中内部元素 */
    gap: 12px; /* 控制文字与汉堡图标的间距 */
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
    display: block;
    position: relative; /* 改为相对定位，留在文档流 */
    width: 25px;
    height: 2px;
    background-color: #616161;
    transition-duration: .25s;
}
.menu__btn > span::before {
    content: '';
    position: absolute; /* 伪元素基于span定位 */
    top: -8px;
    left: 0;
}
.menu__btn > span::after {
    content: '';
    position: absolute; /* 伪元素基于span定位 */
    top: 8px;
    left: 0;
}
#menu {
    margin: 0; /* 清除h2默认边距，避免布局偏移 */
    font-size: 18px; /* 调整文字大小，视觉更协调 */
    color: #616161;
}
.menu__box {
    display: block;
    position: fixed;
    top: 0;
    left: -100%;
    width: 300px;
    height: 100%;
    margin: 0;
    padding: 80px 0;
    list-style: none;
    background-color: #ECEFF1;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
    transition-duration: .25s;
}
.menu__item {
    display: block;
    padding: 12px 24px;
    color: #333;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    transition-duration: .25s;
}
.menu__item:hover {
    background-color: #CFD8DC;
}

HTML

<div class="hamburger-menu">
    <input id="menu__toggle" type="checkbox" />
    <label class="menu__btn" for="menu__toggle">
        <h2 id="menu">MENU</h2>
        <span></span>
    </label>

    <ul class="menu__box">
        <li><a class="menu__item" href="#">Home</a></li>
        <li><a class="menu__item" href="#">About</a></li>
        <li><a class="menu__item" href="#">Team</a></li>
        <li><a class="menu__item" href="#">Contact</a></li>
        <li><a class="menu__item" href="#">Twitter</a></li>
    </ul>
</div>

关键修改说明 #

• flex布局实现对齐：给.menu__btn添加display: flex; align-items: center;，让内部的h2和span自然横向排列且垂直居中，整个label区域仍保持可点击，不破坏原有菜单功能。
• 调整汉堡线条定位：将span的position: absolute改为relative，让它留在文档流中；伪元素（before/after）保持绝对定位，基于span本身，确保汉堡图标仍能正常展开/收起。
• 清除默认样式干扰：去掉h2的默认上下边距，避免布局偏移；将.menu__btn的宽度从500px改为auto，避免不必要的宽点击区域。

内容的提问来源于stack exchange，提问作者Aarroonn