Html 导航窗口问题

我一直在尝试创建自己的网站，现在已经花了几个小时来修补导航栏。我似乎无法让它看起来像这样：

Abdullahi Farah家庭博客联系人

这就是它目前的样子：

Abdullahi Farah                         
                                        contactBlogHome

我怎样才能使我的名字和标签保持在同一个lin上，并在同一个div中，具有相同的背景图像。而且它也不会掩盖

class='intro'

Css:

Html:

阿卜杜拉·法拉
阿卜杜拉·法拉


Linkedin

Github

堆栈溢出

共轨

欢迎
生物
废话废话

项目
废话废话

产品
废话废话

您只需将h1标记向左浮动，并在li标记之间添加边距：

h1 {
  float:left;
}

.Menu li{
  margin-right:20px;
}

将html更改为：

  <div class='nav'>
 <ul class='Menu'>
        <li><a href='#'><span>Home</span></li>
        <li><a href='#'><span>Blog</span></li>
        <li><a href='#'><span>Contact</span></li>
      </ul>     
 <h1 class='Name'>Abdullahi Farah</h1>

    </div>

它将工作…：）

将css更改为：

.Menu {
    float: right;
}

.Menu li {
    display: inline-block;
    margin-left: 10px;
}

  <div class='nav'>
 <ul class='Menu'>
        <li><a href='#'><span>Home</span></li>
        <li><a href='#'><span>Blog</span></li>
        <li><a href='#'><span>Contact</span></li>
      </ul>     
 <h1 class='Name'>Abdullahi Farah</h1>

    </div>

.Menu
{
 display: inline-block;
    float: right;
    list-style: none outside none;
    width: 40%;
}
.Menu li{
  display: inline;
  background-color: #000000;
}

.Menu {
    float: right;
}

.Menu li {
    display: inline-block;
    margin-left: 10px;
}