无法获取内联导航栏内联

Question

我已经在这个问题上挣扎了几个小时(字面意思是3个多小时)，虽然我知道这是一个非常基本的问题，但在阅读了几篇SO帖子和其他资源后，我无法确定问题所在。

问题:我不能让这个导航栏的列表项以内联方式显示(在下面的html中位置完成部分的右边)。

我的CSS，我相信，是写得很差，但我是绿色的，我从Bootstrap开始，然后基于大量的试验和错误慢慢地定制bootstrap类。实际代码运行良好，因此很可能只是这些元素之间的CSS没有意义。

请注意，可折叠导航栏工作正常，当分辨率触发折叠时，导航栏“按钮”会以内联方式显示。只有当实际的列表项显示在未折叠的导航栏上时，它们才不会以内联方式显示。

希望我在这里给了你足够的代码来评估这一点。

感谢您的帮助！

导航栏的HTML：

<div class="navbar navbar-fixed-top">
                <div class="navbar-inner">
                    <div class="container">
                        <button class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                            <span class="icon-bar"> </span>
                            <span class="icon-bar"> </span>
                            <span class="icon-bar"> </span>
                        </button>
                        <% if ['locations', 'posts'].include?(controller_name) and action_name == 'show' %> 
                                <% if controller_name == 'locations' %>
                                    <%= render 'shared/location_autocompletion', location_name: current_location ? current_location.name : @location.name %>
                                <% else %>
                                    <%= render 'shared/location_autocompletion', location_name: current_location ? current_location.name : @post.location.name %>
                                <% end %>
                        <% else %>
                            <a href="/" class="brand nav">Beelo<sub style="font-size: 8px">ALPHA</sub></a>
                        <% end %>                               
                        <div class="nav-collapse collapse">
                            <ul class="nav pull-right signinout">
                                <li><%= link_to 'Home', root_path %></li>
                                <li><%= link_to 'About', page_path('about') %></li>
                                <li><%= link_to 'Terms', page_path('terms') %></li>
                                <% if user_signed_in? %>
                                    <li><%= link_to current_user.username, edit_user_registration_path %></li>
                                    <li><%= link_to "Sign Out", destroy_user_session_path, method: :delete %></li>
                                <% else %>
                                    <li><%= link_to "Sign In", new_user_session_path %></li>
                                    <li><%= link_to "Sign Up", new_user_registration_path %></li>
                                <% end %>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

导航栏HTML中调用的部分的HTML/代码：

<div class="gplacesboxshow">
  <input id="locationSearchField" class="locationSearchField" type="text" placeholder="Enter a place" size="50", value="<%= location_name %>">
  <%# navigator links %>
  <% if controller_name == 'posts' and action_name == 'show' %> 
    <%#= link_to "Change", new_location_path, class: "btn btn-small" %>
    <%= link_to "View All", location_path(session[:current_location_id] || @post.location_id), class: "btn btn-small" %>
  <% elsif controller_name == 'locations' and action_name == 'show' %>
    <%#= link_to "Change", new_location_path, class: "btn btn-small" %>
    <% if !current_user or !current_user.following_location?(@location.id) %>
      <%= link_to "Follow", follow_location_path(@location), :id => "followlink", :class => "btn btn-small" %>
    <% else %>
      <%= link_to "Unfollow", unfollow_location_path(@location), :id => "followlink", :class => "btn btn-small" %>
    <% end %>
  <% end %>
  <% if controller_name == 'posts' and action_name == 'show' %>
  <% end %>
</div>

<%= form_for Location.new do |f| %>
  <%= f.hidden_field :ref_id %>
  <%= f.hidden_field :name %>
  <% Location::GOOGLE_PLACES_TYPES.each do |type| %>
    <%= f.hidden_field type %>
  <% end %>
<% end %>

<div id="map-canvas" style="width: 1%;"></div>

导航栏和部分的CSS：

.navbar .nav.pull-right {
  float: right;
  margin-right: 0;
}

.navbar .nav.showpostnav {
  float: right;
  margin-right: 0;
  padding: 8px 7px 7px 0; 
}

.navbar .nav.pull-left {
  float: left;
  margin-left: 0;
  padding-left: 0;
}

.navbar .nav > ul {
  margin: 0;
  -webkit-padding-start: 0px;
}

.navbar .nav > li {
  float: left;
}

.navbar .nav > li > a {
  float: none;
  padding: 10px 8px 10px 0;
  color: #ffffff;
  text-decoration: none;
  display: block;
}

.nav.signinout {
  font-size: 12px;
}

.nav {
  list-style: none;
}

.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  color: #ffffff;
  background-color: #ffffff;
}

.container h1 {
  text-align: center;
}

.container h3 {

}

.container h4 {
    text-align: center;
}

.container h6 {
  text-align: center;
}

#locationSearchField.locationSearchField {
  display: inline-block;
  margin: 2px 5px 0 0;
  width: 150px;
    -webkit-border-radius: 1px;
     -moz-border-radius: 1px;
          border-radius: 1px;
  padding-left: 2px;
} 

#locationSearchField {
    display: block;
    margin: auto;
    width: 250px;
    -webkit-border-radius: 1px;
     -moz-border-radius: 1px;
          border-radius: 1px;
}

Answer 1

这是多么令人惊讶的事情，但是一旦我把这个问题提交给了我，我感觉很糟糕，以至于我自己都搞不清楚了，于是我休息了一下，然后又回到了这个问题上，然后，又多花了一点时间，瞧：

我没有将locationsearchfield浮动到左边，所以当我将无序导航列表浮动到右边时，它是相对于非浮动元素浮动的。一旦我将"float: left;“添加到位置搜索字段中，它就可以工作了。