如何用CSS实现导航栏logo居左、导航链接居右布局

问题原因 #

当前布局不生效核心有两点：

• 给nav设置display: flex后，子元素的float属性会被完全忽略，因此用float调整位置不会产生效果
• 给flex容器设置了justify-content: right，会把所有直接子元素（logo、导航链接）统一对齐到右侧，无法自动拆分左右两个布局区块

修复方案 #

不需要调整原有HTML结构，仅需修改2处CSS即可实现需求：

• 删除nav样式规则中的justify-content: right
• 给logo（nav下的img标签）添加margin-right: auto属性，该属性会自动占满logo和右侧导航之间的剩余横向空间，直接把所有导航链接推到导航栏最右侧

修正后完整代码 #

CSS代码：

* {margin: 0;}

nav {
    overflow: hidden;
    display: flex;
    padding: 20px 15px;
    color: #344E41;
    align-items: center;
    background: aqua;
}

nav img {
    /* 自动撑开剩余横向空间，将导航链接推至最右侧 */
    margin-right: auto;
}

nav a {
    color: #344E41;
    text-decoration: none;
    margin: 0px 20px;
    transition: 0.5s;
}

nav a:hover {
    opacity: 75%;
}

HTML代码（无需改动，保持原有结构即可）：

<nav>
  <img src="https://i.sstatic.net/oqbjv.png" height="50px">
  <a href="#link1">link1</a>
  <a href="#link2">link2</a>
</nav>

额外优化提示 #

• 同一个HTML页面中id属性必须唯一，原有代码给两个a标签都设置了id="nav_a"不符合规范，需要给多个元素绑定统一样式时使用class属性即可
• 现代网页组件布局优先使用flex/grid实现，float是早期用于图文绕排场景的属性，不适合做整体布局对齐，兼容性和可维护性都更差

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