如何让我的导航按钮内联?
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;
}
我的导航菜单中有一个注销按钮,但它没有正确保持内联,有点偏离,这是我的代码。
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;
}