jquery - 如果存在很多选项卡，导航选项卡会使用省略号调整宽度

Question

我有 nab-tabs，在非事件标签上有省略号。我的目标是能够很好地堆叠这些选项卡并将宽度压缩到需要的宽度以使其占据一行。截至目前，当出现很多选项卡时，它们无处不在。

问题:

这是我的代码。

.nav-tabs>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:4em;
  overflow: hidden;
  display: block;
  float: left;
}

.nav-tabs {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  white-space: nowrap;
}

<ul class="nav nav-tabs">

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

  <li role="presentation" class="{% if '/reports' in request.path %}active {% endif %}inverse"><a href="{% url 'sc:benchmarks:reports-list' benchmark.id %}" role="tab">Reports</a></li>
  <li role="presentation" class="{% if '/hosts' in request.path %}active {% endif %}inverse"><a href="{% url 'sc:benchmarks:hosts-list' benchmark.id %}" role="tab">Hosts</a></li>
  <li role="presentation" class="{% if '/rules' in request.path %}active{% endif %} inverse"><a href="{% url 'sc:benchmarks:rules-list' benchmark.id %}" role="tab">Rules</a></li>
  <li role="presentation" class="{% if '/summary' in request.path %}active {% endif %}inverse"><a href="{% url 'sc:benchmarks:summary' benchmark.id %}" role="tab">Summary</a></li>
  <li role="presentation" class="{% if '/incidents' in request.path %}active {% endif %}inverse"><a href="{% url 'sc:benchmarks:incidents-list' benchmark.id %}" role="tab">Incidents</a></li>
  <li role="presentation" class="{% if '/events' in request.path %}active {% endif %}inverse"><a href="{% url 'sc:benchmarks:events-list' benchmark.id %}" role="tab">Events</a></li>
  <li role="presentation" class="{% if '/aliases' in request.path %}active {% endif %}inverse"><a href="{% url 'sc:benchmarks:aliases-list' benchmark.id %}" role="tab">Aliases</a></li>
</ul>

报告

预期:

如果需要完成我想要的，我很乐意使用 jquery 解决方案。

标签是动态的。可能很多。

Answer 1

这对您的 CSS 有用吗？我将元素更改为内联元素并将 CSS 选择器应用于所有 <li>标签而不是 <a>标签。

.nav-tabs>li {
    background-color: white;
    border: 1px solid #ddd;
    border-bottom: none;
    border-top: 3px solid #9d9d9d;
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
    display: inline-block;
}

.nav-tabs {
    list-style: none;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    white-space: nowrap;
}