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

Dino 发表于 Dev

迪诺

我会尽力解释。我想将此原则应用于我自己的原则。

如您所见，我正在向标签栏添加“标签”。当我添加足够的选项卡以填充整个选项卡栏，并且我继续添加更多选项卡时，这些选项卡基本上会调整大小以适合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

有什么建议么？

内纳德·弗拉卡（Nenad Vracar）

您可以使用完成此操作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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。