将导航栏与徽标或网站名称对齐

Question

我正在创建一个更专注于游戏和应用开发的代码组合网站。自从我完成 HTML 以来已经有一段时间了，我不知道如何将标题与导航栏对齐。我不确定是否需要使用两个单独的 div，或者是否可以使用 CSS。

比如我想让它有这个效果：

Youtube Channel          |-----------------------------------| Represents
Name                     |-----------------------------------| Nav. Bar

导航。该栏应位于两行文本之间的中心

这是我正在使用的代码：

在头下：

ul {
 margin-left: 150px;
 padding: 0px;
 list-style: none;
}
.name {
 color: black;
}

ul 将控制整个无序列表，.name 控制标题 3

在体内：

<h3 class="name">
Intentionally left blank. Refer to example text
</h3>
<ul>
UN-ordered list for links to other pages. Intentionally not adding the lines because there are a lot of un-needed lines of code here.
</ul>

当我运行它时，输出是：

YouTube Channel
Name
                  |----------------------------| Represents
                  |----------------------------| Nav. Bar

我想要的输出是：

Youtube Channel          |-----------------------------------| Represents
Name                     |-----------------------------------| Nav. Bar

Answer 1

可能是这样的

ul {
 padding: 0px;
 list-style: none;
}
.name {
 color: black;
}

<div style="float: left; width:80%">
<h3 class="name">YouTube Channel</h3>
<h3 class="name">Name</h3>
</div>
<div style="float: right; width:20%">
<ul>Represents</ul>
<ul>Nav. Bar</ul>
</div>