如何让我的导航按钮成为内联？

Question

我的导航菜单中有一个退出按钮，但它没有正确保持内联，稍微关闭，这是我的代码。

HTML：

<nav class="col-sm-3" style:"height:20vh;!important">
  <a href="../Pages/account.php" id="navigation">Account</a>
  <a href="../Pages/chat.php" id="navigation">Chat</a>
  <a href="../Pages/video_chat.php" id="navigation">Video Chat</a>
  <form action="../Universals/signout.php" id="navigation_form">
    <button>Sign Out</button>
  </form>
</nav>

链接的CSS：

#navigation a {
 white-space: nowrap!important;
 display: flex;
 justify-content: flex-end;
 margin: 25px 20px 15px;
 min-width: 140px;
 padding: 1px!important;
 font-size: 15px;
 font-weight: bold;
 color: black!important;
 text-decoration: none;
 border: none;
 background-color: transparent;
 background-repeat: no-repeat;
 cursor: pointer!important;
 outline: none;
 overflow: hidden;
 text-align: right!important;
 align-items: right!important;
}

表单的CSS：

#navigation_form {
 white-space: nowrap!important;
 display: inline;
 justify-content: flex-end;
 margin: 25px 20px 15px;
 min-width: 140px;
 padding: 1px!important;
 font-size: 15px;
 font-weight: bold;
 color: white!important;
 text-decoration: none;
 border: none;
 background-color: transparent;
 background-repeat: no-repeat;
 cursor: pointer!important;
 outline: none;
 overflow: hidden;
 text-align: center!important;
 align-items: center!important;

}

----------------------------------------------- ----------------------------

----------------------------------------------- ----------------------------

Answer 1

这应该有效：

form {
     display: inline-block;
}