css - Bootstrap Nav-List 对齐/浏览器兼容性

Question

我正在使用下面的代码在我的基于 Bootstrap 的 Rails 应用程序中创建一个导航列表:

<ul class="nav nav-list">
  <li class="nav-header">Going out</li>
    <% @event_types.each do |et| %>
      <li>
       <a href="/events?event_type=<%= et.id %>">
       <div class="span2"><%= et.event_type %></div>
       <div><span class="badge badge-success"><%= et.events.future_events_count %></span></div></a>
      </li>
   <% end %>
</ul>

我认为这看起来不错，直到有人指出它在 Internet Explorer 中未对齐!!

我的站点在这里:www.wozzoncornwall.co.uk ，例如，如果您在 Chrome 中查看，它看起来不错。在 IE 中查看，您就会明白我的意思。有谁知道如何修改它以保持左侧的事件类型和右侧的事件计数以便跨浏览器兼容？

非常感谢。

Answer 1

好的，这是我自己想出来的。以下是遇到相同问题的其他人的方法。

基本上，我将两个 div 放在 li 标签内，然后使用 Bootstrap pull-right 辅助类:

<% @event_types.each do |et| %>
    <li>
      <a href="/events?event_type=<%= et.id %>">
        <%= et.event_type %>
            <span class="badge badge-success pull-right"><%= et.events.future_events_count %></span>
        </a>
    </li>
<% end %>