a标签内嵌div自动换行 汉堡菜单无法与其他导航项并排怎么解决

问题原因&解决步骤 #

1. 你的CSS存在注释未闭合的语法错误：代码中/* Navigation bar three lines menu没有添加闭合标记*/，导致后续的.topnav相关样式被整体注释失效，flex布局规则没有生效
2. 右侧导航容器.right-nav未设置flex布局，内部的导航项默认没有水平排列+垂直居中的规则
3. 包含汉堡菜单的a标签.menu需要设置弹性布局规则，让内部的三条横线垂直排列，同时和其他导航项保持对齐
4. logo标签内的p元素默认自带上下外边距，会导致左侧logo区域高度异常

修正后的CSS代码 #

.logo-style {
    font-family: Montserrat;
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 39px;
    /* 去掉p标签默认外边距 */
    margin: 0;
    letter-spacing: 0.05em;
    color: #4C5BA0;
}

/*
    Navigation bar three lines menu
*/
/*
 Navigation
*/

.topnav {
    overflow: hidden;
    background: none !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topnav button {
    border: none;
    cursor: pointer;
}

.topnav a {
    color: brown;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    color: black;
}

.topnav a.active {
    color: black;
}

/* 右侧导航设为flex 实现子项水平排列+垂直居中 */
.right-nav {
    display: flex;
    align-items: center;
}

.left-nav {}

.line-one, .line-two, .line-three {
    width: 30px;
}

.menu div {
    width: 30px;
    height: 4px;
    background-color: brown;
    margin: 3px 0;
    border-radius: 25px;
}

/* 汉堡菜单a标签设为弹性容器，垂直排列三条线，调整内边距对齐其他导航项高度 */
.menu {
    display: inline-flex;
    flex-direction: column;
    padding-block: 8px;
}

.menu:hover div {
    background-color: black;
}

修改后所有导航项会水平排列在同一行，汉堡菜单的三条线也会垂直排列在a标签内部，不会出现换行问题。

内容的提问来源于stack exchange，提问作者Mads Sander Høgstrup