实现全宽左右边角导航 解决小屏分辨率下导航项换行问题

1. 全宽适配修改 #

首先解决导航栏两侧贴合容器边缘的问题，你当前的导航外层用了.container类，通常这类容器会自带固定最大宽度和左右内边距，需要覆盖默认样式：

/* 覆盖容器默认样式实现全宽 */
header.header .menu_navbar .container {
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
}
/* 导航内部容器左右贴合 */
header.header .menu_navbar .menu--navbar-inner {
    padding-left: 0;
    padding-right: 0;
}

2. 导航项不换行适配 #

你当前导航是Flex布局，但没有做宽度分配，固定的右外边距会导致小屏挤压换行，修改导航Flex配置：

/* 导航列表全宽 + 自动分配项宽度 */
header.header .menu_navbar .menu--navbar-inner .navigation {
    width: 100%;
    flex-wrap: nowrap; /* 强制不换行 */
    justify-content: space-between; /* 项间距自动分配 */
    padding-left: 0; /* 清除ul默认左内边距 */
    margin-bottom: 0; /* 清除ul默认下外边距 */
}
/* 每个导航项自动平分宽度 */
header.header .menu_navbar .menu--navbar-inner .navigation li {
    flex: 1;
    text-align: center;
    /* 字体自适应屏幕宽度，避免小屏文字溢出 */
    font-size: clamp(0.45em, 1vw, 0.9em);
}
/* 移除固定右外边距，链接宽度铺满项 */
header.header .menu_navbar .menu--navbar-inner li a {
    margin-right: 0 !important;
    width: 100%;
    display: inline-block;
}

3. 小屏兜底适配 #

建议增加响应式断点，在屏幕宽度小于992px时直接切换为汉堡菜单，避免导航项过窄影响体验：

@media (max-width: 991px) {
    header.header .menu_navbar .menu--navbar-inner .navigation {
        display: none;
    }
    /* 此处可添加汉堡菜单的显示样式 */
}

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