如何让我的导航按钮内联?

How do I get my navigation button to be inline?

我的导航菜单中有一个注销按钮,但它没有正确保持内联,有点偏离,这是我的代码。

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;

}

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

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


这应该有效:

form {
     display: inline-block;
}