如何在 HTML/CSS 中的导航栏后面直接添加标题

Question

我试图在同一行（网页的最顶部）的导航栏后面添加一个简单的文本标题，但我似乎无法找到一种方法将它们保持在同一行。

以下代码 CSS：

.navbar div {
    display: block;
    height: 5px;
    background: #fff;
    float: left;
    margin: 7px 0px 7px 0px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;}
.one {width: 40px;}
.two { width: 30px;}
.three { width: 25px;}
.navbar:hover div { width: 40px;}

.header {
    display: flex;
    justify-content: center;
    width: 100%;
    float: right;
    align-items: center;
    color: gold;}

HTML：

<div>
<nav class="dropdown">
    <ul>
    <li>
    <a href="index.html" target="_blank" class="navbar">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </a>
        <ul>
          <li><a href="#">Experience</a></li>
          <li><a href="#">Skills</a></li>
          <li><a href="#">Socials</a></li>
        </ul>
    </li>
    </ul>
</nav>
<h1 class = "header">Sam Jenkins</h1>
</div>

我尝试将标题和导航栏与 div 标签包装在一起，同时让导航栏向左浮动，标题向右浮动。

Answer 1

当 Flexbox 属性应该应用于父容器时，您正在尝试将其应用到标头本身。

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar div {
  height: 5px;
  background: #fff;
  float: left;
  margin: 7px 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.one {width: 40px}
.two {width: 30px}
.three {width: 25px}
.navbar:hover div {width: 40px}

.header {
  color: gold;
}

<header>
  <nav class="dropdown">
    <ul>
      <li>
        <a href="index.html" target="_blank" class="navbar">
          <div class="one"></div>
          <div class="two"></div>
          <div class="three"></div>
        </a>
        <ul>
          <li><a href="#">Experience</a></li>
          <li><a href="#">Skills</a></li>
          <li><a href="#">Socials</a></li>
        </ul>
      </li>
    </ul>
  </nav>

  <h1 class="header">Sam Jenkins</h1>
</header>