Vue项目中Header导航栏父元素高度超出子元素问题排查

问题描述 #

开发Vue.js项目时，页面Header由Logo、搜索框和导航栏组成，导航栏父元素高度超出子链接元素，导致Header被拉伸并出现上下白边。导航栏内链接尺寸正常，但导航栏整体高度异常，需消除白边，达到如下预期效果：

相关代码 #

Header组件代码 #

<header class="site-header">
<div class="wrapper site-header__wrapper">
    <a href="/home" class="logo__wrapper"><img src="../../assets/logo_xsmall.png">
        <p>AOE Builder</p>
    </a>
    <input type="text" placeholder="Search a build...">
    <div class="nav">
        <ul class="nav__wrapper">
            <li class="nav__item"><a href="/all-builds">All builds</a></li>
            <li class="nav__item"><a href="/search">Search</a></li>
            <li class="nav__item"><a href="/my-account">Account</a></li>
            <li class="nav__item"><a href="/about">About</a></li>
        </ul>
    </div>
</div>
</header>

组件CSS代码 #

.site-header {
position: relative;
background-color: #ffffff;
}

a {
    text-decoration: none;
    font-size: larger;
}

a:hover{
    font-weight: 700;
    background-color: #f8f1e4;
    color: black;
}

.site-header__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

input[type=text] {
    float: right;
    border: none;
    margin-right: 16px;
    font-size: 17px;
    border-style: double;
}


.nav__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style-type: none;  
}

.nav__item a {
    display: block;
    padding: 1.5rem 1rem;
 }

全局CSS代码 #

@font-face {
    font-family: cinzel;
    src: url("../fonts/Cinzel-VariableFont_wght.ttf")
}

#app, body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: cinzel;
}

.content {
    flex: 1 0 auto;
    background: url("../bg.png") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

问题根源 #

1. 浏览器默认给<ul>元素设置了margin和padding，导致导航栏整体高度被额外撑开
2. 搜索框使用的float: right破坏了父容器的flex布局，干扰了元素的垂直对齐逻辑

修复方案 #

修改组件CSS代码，做以下调整：

1. 清除导航栏列表的默认内外边距
2. 移除搜索框的float属性，依托flex布局完成定位

修改后的组件CSS代码片段 #

input[type=text] {
    /* 移除float属性 */
    border: none;
    margin-right: 16px;
    font-size: 17px;
    border-style: double;
}

.nav__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style-type: none;  
    margin: 0; /* 清除默认margin */
    padding: 0; /* 清除默认padding */
}

效果验证 #

修改后，导航栏的高度将完全由子链接的padding控制，Header不会再被额外撑开，上下白边消失，与预期效果一致。

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