Listless HTML 和 CSS 导航栏 - 无法使用链接填充扩展导航栏

如何解决Listless HTML 和 CSS 导航栏 - 无法使用链接填充扩展导航栏

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

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);
    border-right:1px solid rgb(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>

解决方法

最简单的方法是在 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);
    border-right:1px solid rgb(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>