如何對齊導航欄按鈕？

Question

我的導航欄目前看起來是這樣的：

我的代碼如下：

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#"> 
     Text Planner 
     </a> 
    </div> 


    <% if user_signed_in? %> 


     <p class="navbar-text navbar-left">Welcome, <strong><%= current_user.first_name.to_s+" "+current_user.last_name.to_s %></strong></p> 

     <div class="nav navbar-nav navbar-right"> 
      <%= link_to "Home", home_path, :class => 'btn btn-default navbar-button' %> 
      <div class="btn btn-default dropdown-toggle navbar-button" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu</div> 
       <ul class="dropdown-menu"> 
       <li><%= link_to "Search For Events", root_path %></li> 
       <li><%= link_to "My Bookmarks", user_bookmarks_path(current_user.id)%></li> 
       <li><%= link_to "My Upcoming Reminders", user_reminders_path(current_user.id)%></li> 
       <li><%= link_to "My Profile", user_path(current_user.id)%></li> 
       <li role="separator" class="divider"></li> 
       <li><%= link_to "Logout", destroy_user_session_path, method: :delete %></li> 
       </ul> 
     </div> 



    <% else %> 


     <ul class="nav navbar-nav navbar-right"> 
      <li><%= link_to "Home", home_path, :class => 'navbar-text' %></li> 
      <li><%= link_to "Sign up", new_user_registration_path, :class => 'navbar-text' %></li> 
      <li><%= link_to "Login", new_user_session_path, :class => 'navbar-text' %></li> 
     </ul> 
    <% end %> 

    </div> 
</nav> 

如何移動的家和菜單按鈕的左側和垂直居中呢？此外，我想保留它們可點擊的按鈕，同時刪除白色背景的按鈕的輪廓，以便它們與我的導航欄的左側相匹配。提前致謝。

Answer 1

這很簡單，其實，你的行高和DIV高度設置爲相同的（這裏有一個簡單的例子）：

#navbar a{ 
    width: 200px; 
    height: 40px; 
    display:inline-block; 
    color:white; 
    line-height:40px; 
} 

使用CSS，形成你的按鈕這提供了，但我相信它的工作原理對於其他元素也是如此。