使用display: inline-block实现导航栏左logo右链接的布局问题

嘿，我完全懂你碰到的这个麻烦——想用display: inline-block来搭建导航栏，结果发现没法把右侧的页面链接对齐到右边，对吧？别担心，咱们用纯inline-block的思路就能搞定这个布局，不用依赖浮动或者弹性盒。

首先，咱们得理清问题的核心：当你给父容器加text-align: right时，所有的inline-block元素都会被推到右边，但你需要logo留在左边，链接在右边。这时候可以用文本对齐的justify技巧，配合伪元素来实现两端对齐：

具体实现步骤： #

1. 给导航栏的父容器（比如<nav>）设置width: 100%，确保它占满整个页面宽度，同时设置text-align: justify，这个属性会让内部的inline-block元素自动分布在容器的两端。
2. 给父容器添加一个伪元素::after，设置它为display: inline-block并且宽度100%，这样text-align: justify才能生效（因为justify需要至少两个元素或者一个元素加伪元素来触发两端对齐）。
3. 把logo和链接容器都设置为display: inline-block，同时调整好它们的垂直对齐（比如vertical-align: middle），避免出现错位。

示例代码： #

<nav class="navbar">
  <a href="#" class="logo">Logo</a>
  <div class="nav-links">
    <a href="#">Home</a>
    <a href="#">Projects</a>
    <a href="#">About</a>
  </div>
</nav>

.navbar {
  width: 100%;
  text-align: justify;
  /* 可选：添加背景和内边距让导航栏更美观 */
  background-color: #f1f1f1;
  padding: 10px 20px;
  box-sizing: border-box;
}

.navbar::after {
  content: '';
  display: inline-block;
  width: 100%;
}

.logo, .nav-links {
  display: inline-block;
  vertical-align: middle;
}

.nav-links a {
  display: inline-block;
  margin-left: 20px;
  text-decoration: none;
  color: #333;
}

这样一来，logo就会乖乖待在左边，所有的页面链接会对齐到右边，而且全程只用了display: inline-block来控制元素的显示方式，完美符合你的需求。

另外，如果你不想用伪元素，还有个替代小技巧：给父容器设置text-align: right，然后给logo设置float: left（虽然用了float，但导航项本身还是inline-block），不过上面的伪元素方法更贴合“只用inline-block”的要求。

备注：内容来源于stack exchange，提问作者MOIA