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形成的，但我相信它也适用于其他元素。

如何对齐导航按钮？

1 个答案: