如何对齐这些项目？

Question

我正在尝试复制一个网站，但是我在同一行上都具有徽标和ul的努力

如果您也可以让我知道我做错了什么，我将非常感谢。

我希望它看起来像

目前的样子

.main-nav {
  display: flex;
  /* justify-content: flex-end; */
  /* display: inline-flex; */
}

.main-nav li {
  list-style-type: none;
}

.main-nav a {
  text-decoration: none;
  padding: 10px;
}

<header>
  <ul class="main-nav">
    <a id="logo">
      <img src="https://via.placeholder.com/128x90.png?text=XYZ">
    </a>
    <li>
      <a>Home</a>
    </li>
    <li>
      <a>About Us</a>
    </li>
    <li>
      <a>Classes</a>
    </li>
    <li>
      <a>News</a>
    </li>
    <li>
      <a>Contact</a>
    </li>
  </ul>

Answer 1

尝试一下，它将起作用。一些规则：

1. 尝试使用<ul> <li> <a>而不是<ul> <a> <li>。因此，最好不要在<ul>
中使用徽标
2. 关闭</header>
3. 在display: flex中使用justify-content: space-between和<header>

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main-nav {
  display: flex;
}

.main-nav li {
  list-style-type: none;
}

.main-nav a {
  text-decoration: none;
  padding: 10px;
}

<header>
  <!-- 	logo -->
  <div class="logo">
    <a href="#">
      <img src="https://i.picsum.photos/id/551/70/70.jpg">
    </a>
  </div>
  <!-- 	nav -->
  <ul class="main-nav">
    <li>
      <a>Home</a>
    </li>
    <li>
      <a>About Us</a>
    </li>
    <li>
      <a>Classes</a>
    </li>
    <li>
      <a>News</a>
    </li>
    <li>
      <a>Contact</a>
    </li>
  </ul>
</header>

Answer 2

您希望将图像从无序列表中取出，因为它不属于菜单。然后为标题和ul提供flex的显示，并将项目与align-items:center垂直对齐。最后，给ul一个margin-left:auto。在Flexbox的上下文中，这将其一直推到容器的右侧。

header, .main-nav {
  display: flex;
  align-items: center;
}

#logo img{
    width: 100px;
}

.main-nav{
    margin-left: auto;
}

.main-nav li {
  list-style-type: none;
}

.main-nav a {
  text-decoration: none;
  padding: 10px;
}

<header>
  <a id="logo">
    <img src="https://via.placeholder.com/128x90.png?text=XYZ">
  </a>
  <ul class="main-nav">
    <li><a>Home</a></li>
    <li><a>About Us</a></li>
    <li><a>Classes</a>
    </li>
    <li><a>News</a></li>
    <li><a>Contact</a></li>
  </ul>

Answer 3

我认为您可以将图片保留在<ul>之外，并用display:inline-flex将其括在div中

.main {
  display: inline-flex;
}

.main-nav {
  display: inline-flex;
}

.main-nav li {
  list-style-type: none;
}

.main-nav a {
  text-decoration: none;
  padding: 10px;
}

<div class="main">
  <a id="logo">
    <img src="https://via.placeholder.com/128x90.png?text=XYZ">
  </a>
  <ul class="main-nav">
    <li>
      <a>Home</a>
    </li>
    <li>
      <a>About Us</a>
    </li>
    <li>
      <a>Classes</a>
    </li>
    <li>
      <a>News</a>
    </li>
    <li>
      <a>Contact</a>
    </li>
  </ul>
</div>