导航栏联系信息无法右对齐且响应式异常，求解决方案

核心解决思路 #

利用Flex布局的margin-left: auto属性，让联系信息自动推到导航栏右侧；同时将左侧的Logo和标题封装在一个容器内，确保它们作为整体居左，避免单独设置宽度导致的折行或重叠问题。

修改后的HTML代码 #

<nav>
    <div class="left-section">
        <label class="logo"><img src="logo.png" width="100px"/></label>
        <div class="title">Title</div>
    </div>
    <div class="contactinfo">Info</div>
</nav>

对应CSS代码 #

nav {
    background: whitesmoke;
    height: 125px;
    width: 100%;
    display: flex;
    align-items: center; /* 替代line-height实现更灵活的垂直居中 */
    padding: 0 10px;
    box-sizing: border-box; /* 确保内边距不撑大导航栏宽度 */
}

.left-section {
    display: flex;
    align-items: center; /* 让Logo和标题垂直居中对齐 */
    gap: 10px; /* 控制Logo与标题的间距 */
}

.title {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: rgb(35, 61, 96);
    font-size: 40px;
    white-space: nowrap; /* 避免标题在小屏幕下强制折行 */
}

.contactinfo {
    font-family: sans-serif;
    font-weight: bold; /* 修正原代码中bold的错误写法 */
    color: rgb(35, 61, 96);
    margin-left: auto; /* 关键：自动填充左侧剩余空间，将元素推至右侧 */
    padding-right: 10px;
    white-space: nowrap; /* 避免联系信息折行 */
}

label.logo {
    padding: 0; /* 去除多余内边距，保证垂直居中一致性 */
}

/* 小屏幕响应式适配 */
@media (max-width: 768px) {
    .title {
        font-size: 28px;
    }
    .contactinfo {
        font-size: 14px;
    }
    nav {
        height: auto; /* 允许导航栏高度自适应 */
        padding: 10px;
        flex-wrap: wrap; /* 空间不足时自动换行 */
        justify-content: center;
        gap: 10px;
    }
    .left-section {
        justify-content: center;
    }
}

关键细节说明 #

• margin-left: auto：Flex布局中实现左右元素分离的核心技巧，会自动填充左侧剩余空间，将联系信息推至最右侧，且不会与左侧元素重叠。
• 左侧元素封装：把Logo和标题放在统一容器内，确保它们作为整体布局，避免单独设置宽度导致的标题折行问题。
• 垂直居中优化：用align-items: center替代line-height，适配不同高度的元素，避免文字与图片对齐偏差。
• 响应式处理：通过媒体查询调整小屏幕下的字体大小和布局逻辑，保证移动设备上的显示效果。

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