html - 从头开始创建导航栏，但在右侧 float 链接和对齐方面存在问题

Question

我正在尝试为网站创建一个自制的导航栏，并希望我的名字出现在最左边，链接 float 到最右边。我使用 CSS 对 Nav 下的所有内容进行格式化，但是当我对链接使用 float 时，它不对齐并且它们看起来与我为它们键入 html 的方式相反。

我知道我在使用 CSS 方面存在重大问题，但正在寻找一些见解或更好的做法。

我避免使用 Bootstrap 或任何预定义的东西，这样我就可以进行一些练习并从头开始对其进行硬编码。

nav {
  border-bottom: 1px solid rgb(196, 196, 196);
  background-color: #F7F9F9;
  padding: 10px;
  width: 100%;
}

.navbar a {
  float: right;
  text-decoration: none;
}

<header>
  <nav>
    <div class="navbar">
      <div>Rick Wilson</div>
      <a href="#">Experience</a>
      <a href="#">Projects</a>
      <a href="#">Technology Stack</a>
      <a href="#">Contact</a>
    </div>
  </nav>
</header>

Answer 1

您可以使用新的对齐方式:网格。 和 让我解释一下，使用 grid 您可以对齐两个 div，这样您就不必依赖于 aligno float。

为此，您必须生成两个 div:一个用于 Logo ，一个用于链接。

然后您在开头声明:display: grid 使用此属性，然后将 Logo div 定位为第一个 ( grid-column: 1/2)并在链接中作为第二个(grid- column: 2/2)。

使用网格的优势之一是它具有部分响应能力。

更多信息

• W3School
• Complete-guide-grid

    .navbar {
        display: inline-grid;
        grid-template: 20% 30%;
        background-color: #F7F9F9;
        border-bottom: 1px solid #c4c4c4;            
        padding: 10px;
        width: 100%;
    }
    .logo {
        grid-column: 1/2;
        background-color: #F7F9F9;
    }
    .links {
        grid-column: 2/2;
    }
    .links a {
        text-decoration: none;
    }

<header>
  <nav>
    <div class="navbar">
      <div class="logo">Rick Wilson</div>
      <div class="links">
        <a href="#">Experience</a>
        <a href="#">Projects</a>
        <a href="#">Technology Stack</a>
        <a href="#">Contact</a>
      </div>
    </div>
  </nav>
</header>