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

时间:2019-05-21 03:02:06

标签: html css web

我正在创建一个代码组合网站,重点关注游戏和应用程序开发。自从完成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

1 个答案:

答案 0 :(得分: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>