在标题中制作导航栏时遇到问题

Question

我正在尝试为页面顶部制作导航栏

.header {
  width: 100%;
  background-color: #2C2F33;
  border-bottom: 2.5px #FF9F00 solid;
  font-size: 15px;
}

#logo img {
  float: left;
  margin: 0;
  padding: 20px;
  width: 187.5px;
  height: 63.75px;
}

.navbar {
  display: flex;
  justify-content: space-between;
}

.navbar,
li {
  display: inline;
  padding: 0 22.5px 0 22.5px;
}

.navbar,
li,
a {
  text-decoration: none;
  list-style-type: none;
}

.navbar,
li,
a:hover {
  color: #FF9F00;
  text-decoration: none;
  list-style-type: none;
}

#dollarydoos,
#dsh {
  color: #FF9F00;
}

#dosh {
  color: #FFFFFF;
}

<div class="header">

  <div id="logo">

    <img src="./img/logo.png"></img>

  </div>

  <div class="navbar">

    <div id="leftnavbar">

      <ul>

        <li><span id="dollarydoos">Dollarydoos:</span> <span id="dosh">1.00000000</span> <span id="dsh">DSH</span></li>

      </ul>

    </div>

    <div id="rightnavbar">

      <ul>

        <li><a href="index.html">Button1</a></li>

        <li><a href="index.html">Button2</a></li>

        <li><a href="index.html">Button3</a></li>

        <li><a href="index.html">Button4</a></li>

      </ul>

    </div>

  </div>

</div>

我无法让按钮和 Dollardoos 有一个围绕它（内部）的小盒子，并与徽标的中心对齐并在中心列成一行。

像这样：

由于我在 HTML/CSS 方面没有太多经验，我该如何做到这一点。我是一个试图建立自己的网站的新手。

Answer 1

我为header 制作了一个弹性框，并为navbar 删除了display:inline

.header {
  width: 100%;
  background-color: #2C2F33;
  border-bottom: 2.5px #FF9F00 solid;
  font-size: 15px;
  display: flex;
  align-items: center;
}

#logo img {
  margin: 0;
  padding: 20px;
  width: 187.5px;
  height: 63.75px;
}

.navbar {
  display: flex;
  justify-content: space-between;
  margin-left: auto;
}

li {
  display: inline;
  padding: 0 22.5px 0 22.5px;
}

.navbar,
li,
a {
  text-decoration: none;
  list-style-type: none;
}

.navbar,
li,
a:hover {
  color: #FF9F00;
  text-decoration: none;
  list-style-type: none;
}

#dollarydoos,
#dsh {
  color: #FF9F00;
}

#dosh {
  color: #FFFFFF;
}

<div class="header">
  <div id="logo">
    <img src="http://placehold.it/200x100">
  </div>
  <div class="navbar">
    <div id="leftnavbar">
      <ul>
        <li><span id="dollarydoos">Dollarydoos:</span> <span id="dosh">1.00000000</span> <span id="dsh">DSH</span></li>
      </ul>
    </div>
    <div id="rightnavbar">
      <ul>
        <li><a href="index.html">Button1</a></li>
        <li><a href="index.html">Button2</a></li>
        <li><a href="index.html">Button3</a></li>
        <li><a href="index.html">Button4</a></li>
      </ul>
    </div>
  </div>
</div>