jquery - 导航出现在第二行

Question

我正在尝试使用 bootstrap 和 jquery 构建响应式导航选项卡，但我的选项卡似乎一直在第二行中断。我想很好地使用全 Angular ，如果有很多则挤压标签。

<style>
#event-detail-nav>li:not(.active) > a {
  background-color: white;
  border: 1px solid #ddd;
  border-bottom: none;
  border-top: 3px solid #9d9d9d;
  text-overflow: ellipsis;
  max-width: 100%;
  width:6em;
  overflow: hidden;
  display: block;
  float: left;

}
#event-detail-nav {
  display: inline-block;  
  max-width: 100%;
  overflow-x: auto;
  text-overflow: ellipsis;
  white-space: nowrap;
  list-style-type: none;
}
#event-detail-nav>li {
  max-width: auto;
  text-overflow: ellipsis;
  overflow: hidden;
}



</style>
<ul id="event-detail-nav" class="nav nav-tabs">

  <div class="btn-toolbar pull-right">
    {% block tab_buttons %}
    {% endblock %}
  </div>

  <li role="presentation" class="{% if '/hosts' in request.path %}active {% endif %}inverse"><a href="{% url 'sc:events:hosts-list' event.id %}" role="tab">Hosts</a></li>
  {% for tab in event.benchmarks.all %}
  <li role="presentation" class="{% if 'summary' in request.path and tab == benchmark %}active {% endif %}inverse "><a href="{% url 'sc:events:benchmarks-summary' event.id tab.id %}" role="tab">{{ tab.name }}</a></li>
  {% endfor %}

</ul>

<script>
    var navLi = document.getElementsByClassName('inverse');
    function duplicate() {
      var clone = navLi[0].cloneNode(true);
      for (var i=0; i < navLi.length; i++) {
        if (navLi.length > 5) {navLi[i].style.maxWidth = '7em';}
        if (navLi.length > 10) {navLi[i].style.maxWidth = '100px';}
        if (navLi.length > 15) {navLi[i].style.maxWidth = '50px';}
      }
    }
    duplicate()
</script>

我想使用全屏宽度来使用所有空间，而不是在新行中形成制表符。

目前看起来是这样

Answer 1

我会在这里使用 flexbox:

 #event-detail-nav {
  display: flex;
  text-overflow: ellipsis;
  list-style-type: none;
}
#event-detail-nav>li {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<div id="event-detail-nav">
  <li>Test1</li>
  <li>Test2</li>
  <li>Test3</li>
</div>