如何将列表、图像和 h1 都放在同一行中但对齐方式不同

如何解决如何将列表、图像和 h1 都放在同一行中但对齐方式不同

我有一个 img（徽标）、一个 h1（站点名称）和一个 ul（导航栏）。 目前， img 和 h1 在同一条线上（都左对齐），这正是我想要的。我的 ul 向下一行，我希望它靠近 h1，右对齐。我怎样才能做到这一点？我试过 display: inline-block;带宽度：自动；但这没有用。

HTML：

<header>
    <img src="/images/logo.png" alt="logo" id="logo">
    <h1>Title</h1>
    <nav>
        <ul>
            <li><a href="index.html" class="nav-link">Home</a> |</li>
            <li><a href="gallery.html" class="nav-link">gallery</a> |</li>
            <li><a href="about.html" class="nav-link">About</a></li>
        </ul>
    </nav>
</header>

和 CSS：

h1 {
    display: inline-block;
    width: auto;
}

ul {
    list-style: none;
    display: inline-block;
    width: auto;
}

ul li {
    display: inline;
}

我真的很感激一些帮助，在这个问题上被困了太久

解决方法

您可以使用简单的 css 网格来做到这一点，只需添加标题和导航 css 类

header {
  display: grid;
  grid-template-columns: repeat(2,auto) 1fr;
  align-items: center;
}

nav {
  justify-self: end;
}

h1 {
    display: inline-block;
    width: auto;
}

ul {
    list-style: none;
    display: inline-block;
    width: auto;
}

ul li {
    display: inline;
}

<header>
    <img src="/images/logo.png" alt="Logo" id="logo">
    <h1>Title</h1>
    <nav>
        <ul>
            <li><a href="index.html" class="nav-link">Home</a> |</li>
            <li><a href="gallery.html" class="nav-link">Gallery</a> |</li>
            <li><a href="about.html" class="nav-link">About</a></li>
        </ul>
    </nav>
</header>