有问题在标题中创建导航栏

Question

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我不能让按钮和美元有一个围绕它的小盒子（里面）和对齐到徽标的中心并在中心排成一行。

像这样：

我怎么能这样做，因为我对HTML / CSS不太熟悉。我是一个新手试图建立自己的网站。

Answer 1

我制作了header的弹性框，并删除了display:inline的{​​{1}}

navbar

.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;
}