如何避免header在列表项未换行时因空白提前换行导致高度翻倍？

我的网站的header区域包含一个列表，原本设计为在小屏幕上自动换行，但在特定屏幕尺寸下，第一个列表项还未移到第二行时，header区域的高度就提前翻倍（相当于无意义的换行）。有没有办法避免这种情况，确保只有当确实有列表项显示在第二行时，header的高度才会增加？

现有代码 #

CSS代码 #

header > nav > ul {
    display: block;
    text-align: left;
    hyphens: none;
    margin: 0;
}

header > nav > ul > li
{
    list-style: none;
    display: inline;
    padding-right: 1.5rem;
}

HTML代码 #

<body>
    <header>
        <nav>
            <ul>
                <li> ...  </li>
                <li> ...  </li>
                <li> ...  </li>
                <li> ...  </li>
            </ul>
        </nav>
    </header>
    <main>...</main>
    <footer>...</footer>
</body>

问题根源在于inline元素的空白间隙和padding-right导致容器宽度计算偏差，浏览器会在列表项实际放不下前就触发换行。以下是几种可行的修复方案：

方案1：改用Flex布局（推荐） #

Flex布局能精准控制换行时机，同时用gap替代padding-right避免间距干扰：

header > nav > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem; /* 统一控制列表项间距，替代padding-right */
    margin: 0;
    padding: 0;
}

header > nav > ul > li {
    list-style: none;
    /* 移除原有的padding-right */
}

flex-wrap: wrap会在列表项真正超出容器宽度时才换行，gap能避免右侧内边距导致的宽度计算误差，彻底解决提前换行问题。

方案2：优化Inline布局的空白处理 #

如果要保留inline/inline-block布局，需消除inline元素之间的空白字符（浏览器会将代码中的换行、空格解析为空格，导致提前触发换行）：

header > nav > ul {
    display: block;
    text-align: left;
    hyphens: none;
    margin: 0;
    padding: 0;
    font-size: 0; /* 消除列表项之间的空白间隙 */
}

header > nav > ul > li {
    list-style: none;
    display: inline-block; /* 比inline更稳定的行内块布局 */
    padding-right: 1.5rem;
    font-size: 1rem; /* 恢复正常字体大小 */
}

也可以直接把HTML中</li>和<li>连写（比如</li><li>）来消除空白，效果相同。

方案3：临时修复：设置Header最小高度 #

如果只是快速掩盖问题，可以给header设置最小高度，等于单行列表的高度，确保未真正换行时高度不变：

header {
    min-height: 2.2rem; /* 根据你的字体大小和行高调整数值 */
}

这种方法只是临时方案，不如前两种从根源解决问题。

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