如何实现图片与导航栏（Navbar）处于同一行布局？

你的.navbar是默认块级容器，内部的.logo-container也是块级元素，会独占一行；而导航按钮用了float:right，只能挤到下一行右侧，自然无法和logo同行显示。

Flexbox是现代布局方案，能轻松实现元素同行对齐，还能保证垂直居中。修改后的完整代码如下：

修改后的CSS #

body {
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  /* 替换原overflow:hidden，改用flex布局 */
  display: flex;
  align-items: center; /* 垂直居中所有元素 */
  justify-content: space-between; /* 左侧放logo，右侧放导航 */
  background-color: #333;
  padding: 0 10px; /* 可选：给容器加左右内边距，避免元素贴边 */
}

.navbar a {
  /* 移除原float:right */
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  /* 移除原float:right */
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* style the logo */
.logo-container {
  height: 50px;
  display: flex;
  align-items: center;
}

.logo {
  height: 100%;
}

修改后的HTML（可选优化：打包右侧导航元素） #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="navbar">
  <div class="logo-container">
    <img src="https://www.logomaker.com/wpstatic/uploads/2021/10/LogoMaker.jpg" alt="Avolution Software Logo" class="logo">
  </div>
  <!-- 新增导航容器，让右侧元素结构更规整 -->
  <div class="nav-links">
    <a href="#home">Home</a>
    <a href="#news">News</a>
    <div class="dropdown">
      <button class="dropbtn">Dropdown 
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

1. .navbar改用flex布局：通过display:flex让所有子元素同行，align-items:center保证logo和导航按钮垂直居中，justify-content:space-between自动将logo推至左侧、导航推至右侧。
2. 移除float:right：flex布局无需浮动控制位置，浮动反而会干扰flex的正常排列逻辑。
3. 新增nav-links容器（可选）：把右侧导航元素打包在一起，布局结构更清晰，后续调整样式也更方便。

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