如何让列表、图像和 h1 都在同一行（但对齐方式不同）

Question

我有一个 img（徽标）、一个 h1（站点名称）和一个 ul (nav bar). Currently, the imgand theh1are on the same line (both aligned left) which is what I want. Myulis one line down and i want it next to theh1, aligned right. How can I do that? I've tried display: inline-block;withwidth: auto;` 但那没用。

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;
}

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

Answer 1

您可以使用 css 网格轻松做到这一点，只需添加 header 和导航 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>

如何让列表、图像和 h1 都在同一行（但对齐方式不同）

How to have a list, an image and a h1 all in the same line (but aligned differently)

html

css

alignment

html-lists