如何对齐标题和标题上的导航

Question

我是CSS的新手，我想问一个问题：我有一个包含两个元素的<header>，我想将它们对齐，标题在右边，导航在左边，但我真的无法单独破解它。

<pre>
<header >
<h1>Title</h1>
<nav class="navigation">
<ul class="navlist">
<li>list element</li>
<li>list element</li>
<li>list element</li>
</ul>
</nav>
</header>
</pre>

Answer 1

您应该了解flexbox:

header {
display: flex;
}
header h1 {
order: 1;
}

<header>
<h1>Title</h1>
<nav class="navigation">
<ul class="navlist">
<li>list element</li>
<li>list element</li>
<li>list element</li>
</ul>
</nav>
</header>

Answer 2

我想你可能想在这个ui外观中实现。这里有一些好文章可以帮助你灵活的

#parent {
width: 100%;
}
header {
display: flex;
justify-content: space-between;
}

<div id="parent">
<header>
<h1>Title</h1>
<nav class="navigation">
<ul class="navlist">
<li>list element</li>
<li>list element</li>
<li>list element</li>
</ul>
</nav>
</header>
</div>