Css 下划线-并排div

我在玩CSS和下划线。我试着把两个DIV并排放在一起，但它不知道怎么做

第一个想法：将这些项设置为内联元素。 说起来容易，做起来不容易

几年前有一个非常类似的问题：

我尝试过以下代码：

。网站品牌{
明确：无；
显示：内联；
}
.网站名称{
明确：无；
显示：内联；
}
.主导航{
显示：内联；
}

HTML:

<header id="masthead" class="site-header" role="banner">
  <div class="site-branding">
    <h1 class="site-title"><a href="#" rel="home">Sitename</a></h1>
  </div><!-- .site-branding -->

  <nav id="site-navigation" class="main-navigation" role="navigation">
    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"></button>
<ul>
  <li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
  </nav><!-- #site-navigation -->
</header><!-- #masthead -->

.site-branding {
  clear: none;
  display: inline;
  }

.site-title {
  clear: none;
  display: inline-block;
  width:30%;
  }

.main-navigation {
  display: inline-block;
  width:50%;
  }

ul >li{
display: inline-block;
}

---

魔法。不，说真的-看看这个。第一个答案应该为你提供你需要的信息，以便了解这里发生了什么：刚刚意识到还有第二部分链接没有回答。宽度非常重要。为了使div能够在水平块中对齐，它们需要的宽度不超过容器的宽度。公式类似于D1宽度+D2宽度+D3宽度。。。