无精打采 HTML & CSS 导航栏 - 无法使用 link 填充扩展导航栏

Question

尝试开发一个只有链接的无列表或无列表导航栏。我正在使用导航标签和一堆链接，但我似乎无法使用 'a' 标签中提供的填充使 'nav' 标签正确扩展（高度方向）。

nav{
    background-color:midnightblue;
    width:100%;
}

nav > a:link {
    padding:5px;
    font-size:.8em;
    border-top:1px solid rgb(255, 255, 255);
    border-left:1px solid rgb(255, 255, 255);
    border-right:1px solid rgb(255, 255, 255);
    text-decoration: none;
    color:white;
    background-color:rgb(119, 119, 172);
    margin-right:.5em;
    transition: background-color 0.3s ease;
}

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Work</a>
  <a href="#">Contact</a>
</nav>

Answer 1

最简单的方法是跟随 css 行：nav { display: flex; flex-direction: row; }.

display: flex; 使导航栏成为弹性容器。 flex-direction: row; 将确保元素放置在行中，而不是像普通块元素一样放置在列中。

编辑：如评论中正确所述，这是默认行为，可以省略。

nav{
    background-color:midnightblue;
    width:100%;
    display: flex;
    flex-direction: row;
}

nav > a:link {
    padding:5px;
    font-size:.8em;
    border-top:1px solid rgb(255, 255, 255);
    border-left:1px solid rgb(255, 255, 255);
    border-right:1px solid rgb(255, 255, 255);
    text-decoration: none;
    color:white;
    background-color:rgb(119, 119, 172);
    margin-right:.5em;
    transition: background-color 0.3s ease;
}

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Work</a>
  <a href="#">Contact</a>
</nav>

无精打采 HTML & CSS 导航栏 - 无法使用 link 填充扩展导航栏

Listless HTML & CSS Nav bar - Can't get nav bar to expand with link padding

html

css

nav

navbar