求助：实现Logo左对齐垂直居中、导航菜单右对齐垂直居中布局

预期效果 #

Logo垂直居中且居页面左侧，导航栏垂直居中且居页面最右侧，水平线位于两者正下方。

需求目标 #

• Logo图片垂直居中且水平居页面左侧
• 导航栏居页面最右侧且垂直居中
• 水平线（HR）位于图片与导航栏的正下方

修改后的代码 #

HTML代码 #

<div class="nav"> 
  <ul>
    <li class="logo-item"><img src="Images/logo.jpg"></li>
    <div class="nav-links">
      <li><a class="link" href="#">Contact</a></li>
      <li><a class="link" href="#">Qual...</a></li>
      <li><a class="link" href="#">Home</a></li>
    </div>
  </ul>
  <hr class="hr">     
</div>

CSS代码 #

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logo-item {
  margin-left: 1rem; /* 可根据需求调整左侧间距 */
}

.nav-links {
  display: flex;
  gap: 1.5rem; /* 可根据需求调整导航项间距 */
  margin-right: 1rem; /* 可根据需求调整右侧间距 */
}

.nav li {
  vertical-align: middle;
}

.hr {
  width: 100%;
  margin: 0.5rem 0 0 0;
  border: none;
  border-top: 1px solid #ccc; /* 可根据需求调整水平线样式 */
}

核心修改说明 #

• 给nav ul设置display: flex，通过justify-content: space-between实现Logo左对齐、导航栏右对齐，同时用align-items: center保证垂直居中
• 将导航项包裹在单独的nav-links容器中，方便统一控制间距和对齐
• 清除列表默认的margin和padding，避免默认样式干扰布局
• 给水平线设置width: 100%，确保它铺满整个容器宽度，位于导航栏正下方

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