html - 关于 fixed-navbar + text-align right CSS/HTML 的问题

Question

刚刚开始我的代码之旅，希望您能在这里阐明一些想法。我只是不太清楚如何调整我的代码以反射(reflect)我正在尝试做的事情。我试过使用 float:right 但它似乎篡改了我之后修改边距的能力。

我已尝试调整填充/边距/文本对齐，但似乎无法将导航栏文本调整到我想要的位置。我想要的是正确对齐， 然后将它从它所在的顶部偏移，然后在单词之间留出空间以供展示。我想将其保留为固定导航栏，在滚动过程中始终显示 Logo 和文本。

这里有一个 jsfiddle 的链接作为示例，请参阅下面的我的 topnav CSS 代码。

https://jsfiddle.net/gbr403/t1u7q3wL/

.topnav {
    background-color: black;
    overflow: hidden;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%;
    height: 63px; 
    border-bottom: 1px solid seashell;
  }

Answer 1

您可以使用 flexbox对齐导航栏中的元素。请参见下面的示例

body {
  margin: 0;
}

.navbar,
.navbar--links {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar {
  background-color: #222;
  padding: 13px 15px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.navbar--logo {
  width: 50px;
  height: 50px;
}

.navbar--links a {
  text-decoration: none;
  color: #fff;
  margin-left: 18px;
}

<nav class="navbar">
  <img src="https://images.pexels.com/photos/258174/pexels-photo-258174.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="navbar--logo"/>
  <div class="navbar--links">
    <a href="#Mission">Mission</a>
    <a href="#Featured-Tea">Featured Tea</a>
    <a href="#Locations">Locations</a>
  </div>
</nav>