列表中的一个成员高于另一个成员答案

【问题标题】：One member of a list higher than the other列表中的一个成员高于另一个成员
【发布时间】：2022-02-14 11:00:19
【问题描述】：

我正在尝试在我的网站中创建一个导航栏，但每次我尝试将徽标向左对齐时，页面选择都会放得更高，有人有解决方案吗？

截图：

这是html代码：

  <div class="NavBar">
    <ul class="Items">
      <li class="Logo">
        <img src="images/logo1.png" alt="IM2B - Play your brand">
      </li>
      <li class="Links">
        <a class="active" href="#home">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
      </li>
    </ul>
  </div>

这是css代码：

.NavBar {
  list-style-type: none;
  overflow: hidden;
  background-color: #333;
  padding: 20px;
}

.NavBar .Items {
  margin: auto;
  width: 60%;
  text-align: center;
  list-style: none;
}

.NavBar .Logo {
  float: left;
}

.NavBar .Links {
  display: inline-block;
  padding: 0px 16px;
}

.NavBar .Links a {
  color: #f2f2f2;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.NavBar .Links a:hover {
  background-color: #ddd;
  color: black;
}

.NavBar .Links a.active {
  background-color: #04AA6D;
  color: white;
}

【问题讨论】：

标签： html css alignment

【解决方案1】：

将 flex 属性添加到外部 navitem 的容器中：

 .NavBar .Items {
     margin: auto;
     display: flex;
     justify-content: space-around;
     align-items: center;
     /* width: 60%; */
     text-align: center;
     list-style: none;
 }


.NavBar .Links {
     border: 2px solid white;
     display: flex;
     justify-content: space-around;
     align-items: center;
}

【讨论】：

【解决方案2】：

这是您要找的吗？看，有两级display:flex 用于对齐。

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

.NavBar {
  list-style-type: none;
  background-color: #333;
  padding: 10px;
}

ul li {
  list-style-type: none;
}

.NavBar .Items {
  display: flex;
  justify-content: space-around;
}

.NavBar .Links {
  display: flex;
}

.NavBar .Links a {
  color: #f2f2f2;
  text-decoration: none;
  font-size: 17px;
  padding: 10px 20px;
  display: inline-block;
  height: 40px;
  align-self: center;
}

.NavBar .Links a:hover {
  background-color: #ddd;
  color: black;
}

.NavBar .Links a.active {
  background-color: #04AA6D;
  color: white;
}

img {
  height: 60px;
  width: 100px;
}

<div class="NavBar">
  <ul class="Items">
    <li class="Logo">
      <img src="https://picsum.photos/200/300" alt="IM2B - Play your brand">
    </li>
    <li class="Links">
      <a class="active" href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
    </li>
  </ul>
</div>

【讨论】：