在導航欄內對齊窗體按鈕

Question

我有點卡住瞭如何正確對齊導航欄上的按鈕，其中按鈕被包裹在窗體中。

這裏是標記我（在這裏是一個的jsfiddle如果簡單：https://jsfiddle.net/darrelltunnell/DTcHh/24292/）

<nav class="navbar navbar-inverse navbar-fixed-top gcs-navbar" id="main-menu"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed main-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <span class="navbar-brand">    
       Test    
     </span> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse">    
     <ul data-toggle="collapse" data-target="#navbar.in" class="nav navbar-nav navbar-right"> 


        <li><a href="@menuItem.Path">One</a> </li> 
        <li><a href="@menuItem.Path">Two</a> </li> 
        <li><a href="@menuItem.Path">Three</a> </li> 

        <form asp-area="" asp-controller="Account" asp-action="LogOff" method="post" id="logoutForm" class="navbar-right"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li> 
      <a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage"> 
       <span class="fa fa-user"></span> 
       Daz 
      </a> 
     </li> 
     <li> 
      <button type="submit" class="btn btn-link navbar-btn navbar-link" style="border: none;padding-right:20px">Logout</button> 
     </li> 
    </ul> 
</form> 


     </ul> 
    </div> 
</div> 

的問題是，無論是錨和按鈕（表格內）不與其他導航項目正確對齊。

任何指針非常讚賞。

Answer 1

您應該使用<ul>標籤是這樣的：

<ul> 
    <li>Item1</li> 
    <li>Item2</li> 
</ul> 

<ul> 
    <li>Item3</li> 
    <li>Item4</li> 
</ul> 

代碼：

<nav class="navbar navbar-inverse navbar-fixed-top gcs-navbar" id="main-menu"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed main-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <span class="navbar-brand"> Test </span> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul data-toggle="collapse" data-target="#navbar.in" class="nav navbar-nav navbar-right"> 

       <li> 
        <a href="@menuItem.Path">One</a> 
       </li> 
       <li> 
        <a href="@menuItem.Path">Two</a> 
       </li> 
       <li> 
        <a href="@menuItem.Path">Three</a> 
       </li> 
      </ul> 
      <form asp-area="" asp-controller="Account" asp-action="LogOff" method="post" id="logoutForm" class="navbar-right"> 

       <ul class="nav navbar-nav navbar-right"> 
        <li> 
         <a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage"> <span class="fa fa-user"></span> Daz </a> 
        </li> 
        <li> 
         <button type="submit" class="btn btn-link navbar-btn navbar-link" style="border: none;padding-right:20px"> 
          Logout 
         </button> 
        </li> 
       </ul> 
      </form> 

      </ul> 
     </div> 
    </div> 
</nav>