在添加新元素时缩小div元素

Question

我会尽力解释它.我想把这个原则应用到我自己的原则上.

标签添加示例

正如您所看到的,我正在向标签栏添加"标签".当我添加足够的标签来填充整个标签栏,并且我不断添加更多标签时,这些标签基本上会调整大小以适应div.我不希望他们扩展div或使用滚动条在它们之间移动.我希望他们在div中收缩.你可以在我链接的GIF上看到确切的例子.

它在窗口大小调整时也应该表现相同.

窗口调整大小示例

您对如何实现这一点有任何想法吗？我尝试使用JQuery,但是它太多'硬编码',它不适用于调整大小,也不适用于不同的屏幕分辨率.

HTML我想申请:

<div class="l_tabs">
 <div>
  <ul id="myTab1" class="nav nav-tabs bordered">
   <li class="tab-add"></li>
   <li class="contentTab"></li>
   <li class="contentTab"></li>
   <li class="contentTab"></li>
   <li class="contentTab"></li>
  </ul>
 </div>
</div>

当我添加新标签时,它会添加此标签
<li class="contentTab"></li>

的jsfiddle

有什么建议？

Answer 1

你可以这样做Flexbox,你只需要设置flex-basis

$(".add").click(function() {
  $(".tabs").append('<li class="tab">Lorem ipsum</li>');
})

$('.remove').click(function() {
  $('.tab').last().remove();
})

.tabs {
  display: flex;
  list-style: none;
  padding: 0;
}
.tab {
  border: 1px solid black;
  flex-basis: 200px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
  <li class="tab">Lorem ipsum</li>
</ul>

<button class="add">Add Tab</button>
<button class="remove">Remove Tab</button>