将导航栏与左侧的标题文本对齐

Question

我正在创建一个代码组合网站，重点关注游戏和应用程序开发。自从完成HTML以来已经有一段时间了，我不知道如何将标题与导航栏对齐。我不确定是否需要单独使用两个，或者是否可以使用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>