求助：如何让Logo与Navbar同高并排显示？

问题描述 #

我正尝试解决Logo与Navbar（导航栏）无法同高并排的问题。我希望Logo能显示在导航栏旁，但当前两者上下错位，页面空白占据整页宽度，无法将Logo放置到预期位置。

现有代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"  href="css/style.css" />
</head>
<body>
   
<img src="../images/logo.png" alt="" width="90" height="90">
 <div class="hamburger-menu"><div class="rectangle">
        <ul class="navbar" id="nav">
            <li><a href="homepage.html" id="homepage">HOMEPAGE</a></li>
            <li><a href="information.html">INFORMATION</a></li>
            <li><a href="form.html">FORM</a></li>
            <li><a href="contact.html">CONTACT</a></li>
            <li><a class="behandelingen" href="behandelingen.html">BEHANDELINGEN</a></li>
          </ul>
    </div></div>
</body>
</html>

CSS代码 #

/*dit gaat over de indeling */
#nav ul .navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#nav li {
    float: center;

}

#nav a {
    display: block;
    padding: 8px;
    
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ffffff;
  }
  
  li {
    float: left;
  }
  
  li a:not(.behandelingen, .logo) {
    display: block;
    color: rgb(0, 0, 0);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    margin: auto;
    border-right: 1px solid;
  }
  
 /*Dit houd in dat de navbar knop de kleur #111 (zwart) word wanneer je er met je muis overheen gaat */
  li a:hover {
    background-color: #c0c0c0;
  }

.rectangle:not(.img) {
  border-bottom: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  width: 43%;
  padding: 10px;
  margin: auto;
}

a:link, a:visited, a:hover, a:active { color: black;
  text-decoration: none;
}

问题截图 #

解决方案 #

步骤1：调整HTML结构，统一容器包裹 #

把Logo和导航栏放入同一个头部容器，方便整体控制布局：

<header class="header-container">
  <img src="../images/logo.png" alt="" width="90" height="90" class="logo">
  <div class="hamburger-menu">
    <div class="rectangle">
      <ul class="navbar" id="nav">
        <li><a href="homepage.html" id="homepage">HOMEPAGE</a></li>
        <li><a href="information.html">INFORMATION</a></li>
        <li><a href="form.html">FORM</a></li>
        <li><a href="contact.html">CONTACT</a></li>
        <li><a class="behandelingen" href="behandelingen.html">BEHANDELINGEN</a></li>
      </ul>
    </div>
  </div>
</header>

步骤2：修改CSS实现横向并排与垂直居中 #

用Flexbox替换原有浮动布局，解决对齐问题：

/* 头部容器设置Flex布局，实现横向并排+垂直居中 */
.header-container {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 可改为center实现整体居中 */
  gap: 20px; /* Logo与导航栏的间距 */
  padding: 0 20px;
}

/* 重置导航栏样式，移除无效规则 */
ul.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex; /* 导航项横向排列 */
  background-color: #ffffff;
}

li {
  /* 移除原float:left，改用flex布局控制 */
}

li a:not(.behandelingen) {
  display: block;
  color: rgb(0, 0, 0);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border-right: 1px solid;
}

li a:hover {
  background-color: #c0c0c0;
}

/* 调整矩形容器，去除不必要的宽度限制 */
.rectangle {
  border-bottom: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  padding: 10px;
}

a:link, a:visited, a:hover, a:active { 
  color: black;
  text-decoration: none;
}

关键说明 #

• Flexbox是解决这类对齐问题最简洁的方案，display: flex让元素横向排列，align-items: center保证垂直方向居中。
• 移除了原CSS中无效的float: center（float无center取值），以及指向错误的冗余选择器（如#nav ul .navbar，实际#nav就是ul本身）。
• 取消.rectangle的固定宽度限制，让导航栏自适应内容宽度。

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