Question

我一直在努力解决这个问题几个小时（实际上略超过3个小时），虽然我知道这是非常基本的，但在阅读了几篇SO帖子和其他资源之后，我一直无法确定问题。

问题：我无法将此导航栏的列表项显示为内联（位于以下html中的locationcompletion部分右侧）。

我认为我的CSS写得不好，但是绿色，我开始使用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

令人惊讶的是这种情况如何发生，但是一旦我向SO提交了这个问题，我感觉非常糟糕，以至于我无法弄明白我休息了一下，回过头来看了之后又多了一点，瞧：

我没有将locationsearchfield浮动到左侧，所以当我将无序导航列表向右浮动时，它相对于非浮动元素浮动。一旦我添加了“float：left;”到它工作的locationsearchfield。

无法获取内联Navbar内联

1 个答案: