如何让含display:flex的两个Div同行？无需放弃Flexbox

我正在制作导航栏，希望将logo与带有display:flex属性的nav-links容器放在同一行。原本以为需将两者设为display:inline-block，但我不想放弃Flexbox，因为需要用justify-content:space-between来布局导航链接。

当前代码如下：

CSS 代码 #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.top-banner {
  background-color: #632D1D;
  height: 50px;
}

.logo {
  display: inline;
  margin-left: 10%;
}

.navigation {
  margin: 0 auto;
  height: 80px;
  background-color: bisque;
}

.nav-links {
  background-color: aqua;
  width: 50%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 auto;
}

HTML 代码 #

<div class="top-banner"></div>
<div class="navigation">
  <div class="logo">SaleByFarmer</div>
  <div class="nav-links">
    <a href="#mangoes">Mangoes</a>
    <a href="#fruits">Fruits</a>
    <a href="#flowers">Flowers</a>
    <a href="#ourstory">Our Story</a>
    <a href="#contact">Contact Us</a>
  </div>
  <i src="/icons/cart-shopping-solid.svg" class="shopping-cart-icon"></i>
</div>

当前页面效果：

解决方案 #

你不需要用inline-block，直接给父容器.navigation添加Flex布局即可，这样既能让Logo、导航链接容器、购物车图标在同一行，又能保留nav-links内部的Flex布局来实现链接间距。

修改后的CSS代码 #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.top-banner {
  background-color: #632D1D;
  height: 50px;
}

.logo {
  margin-left: 10%;
  /* 去掉display:inline，Flex子元素默认会参与行排列 */
}

.navigation {
  margin: 0 auto;
  height: 80px;
  background-color: bisque;
  /* 关键：给父容器添加Flex布局 */
  display: flex;
  /* 让子元素垂直居中，符合导航栏的常见布局 */
  align-items: center;
  /* 可选：用gap控制元素间的间距 */
  gap: 20px;
}

.nav-links {
  background-color: aqua;
  width: 50%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* 去掉margin:0 auto，父容器的Flex布局已能控制位置 */
}

.shopping-cart-icon {
  /* 给购物车图标添加右侧间距，避免贴边 */
  margin-right: 10%;
}

修改说明 #

1. 给.navigation设置display:flex，它的所有直接子元素会默认在一行排列。
2. 添加align-items:center让所有子元素垂直居中，适配导航栏高度。
3. 去掉.logo的display:inline，Flex子元素本身就会参与行布局，无需额外设置。
4. 调整.nav-links的margin:0 auto，如果需要让导航链接居中，可通过父容器的justify-content:space-between分配元素位置，或用gap控制间距。
5. 给购物车图标添加右侧间距，优化视觉效果。

修改后，Logo和导航链接容器会在同一行显示，同时你依然可以用justify-content:space-between布局nav-links内部的链接。

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