Термоусадочные элементы div при добавлении новых

Question

Я попытаюсь объяснить это как можно лучше. Я хочу применить этот принцип к своему.

Tab Add Example

Как вы можете видеть, я добавляю «вкладки» на панели вкладок. Когда я добавляю достаточно вкладок, чтобы заполнить всю панель вкладок, и я продолжаю добавлять больше, эти вкладки в основном изменяют размер, чтобы соответствовать div. Я не хочу, чтобы они расширяли div или использовали полосу прокрутки для перемещения между ними. Я хочу, чтобы они сжимались внутри div. Вы можете увидеть точный пример в GIF, который я связал.

Он также должен вести себя одинаково при изменении размера окна.

Window Resize Example

У вас есть какие-либо идеи о том, как достичь этого? Я пытался с 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>

Answer 2

Вы можете использовать Flexbox делать именно то, что вы хотите

ul { 
    display: -webkit-box; 
} 


ul li { 
    -webkit-box-flex: 1; 
    background: #ddd; 
    padding: 10px 15px 6px 15px; 
    white-space: nowrap; 
    overflow: hidden; 
    max-width: 180px; 
    min-width: 60px; 
    border: solid #ccc 1px; 
    border-bottom: none; 
    border-radius: 5px 5px 0 0; 
    text-overflow: ellipsis; 
} 

Answer 3

$('.tab-add').click(function() { 
 
    $('.tab-add').html('+'); 
 
    var lastCount = $('#myTab1 li:last-child').html(); 
 
    var plusOne = parseInt(lastCount) + 1; 
 
    $('#myTab1').append('<li class="contentTab">' + plusOne + '</li>'); 
 
});

* { 
 
    margin: 0; padding: 0; 
 
} 
 
.l_tabs { 
 
    width: 100%; 
 
    background-color: red; 
 
} 
 
#myTab1 { 
 
    display: flex; 
 
    list-style-type: none; 
 
} 
 
#myTab1 li { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex: 1; 
 
    line-height: 50px; 
 
    color: white; 
 
    background-color: hsla(0, 0%, 20%, 1); 
 
} 
 
#myTab1 li:nth-child(even) { 
 
    background-color: hsla(0, 0%, 40%, 1); 
 
} 
 
.tab-add:hover { 
 
    background-color: hsl(0, 55%, 55%)!important; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="l_tabs"> 
 
<div> 
 
    <ul id="myTab1" class="nav nav-tabs bordered"> 
 
    <li class="tab-add">click to add</li> 
 
    <li class="contentTab">1</li> 
 
    <li class="contentTab">2</li> 
 
    <li class="contentTab">3</li> 
 
    <li class="contentTab">4</li> 
 
    </ul> 
 
</div> 
 
</div>

скрипку

https://jsfiddle.net/Hastig/mx2mxgg1/2/

Answer 4

Вы можете использовать display: table и display: table-cell для этого:

$("#add").click(function() { 
 
    $("<li>", { "class": "tab", "text": "Lorem ipsum" }).appendTo(".tabs"); 
 
}); 
 

 
$("#del").click(function() { 
 
    $(".tab").last().remove(); 
 
});

.tabs { 
 
    display: table; 
 
    border-collapse: collapse; 
 
    padding: 0; 
 
} 
 
.tab { 
 
    display: table-cell; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
}

<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 id="add">Add Tab</button> 
 
<button id="del">Remove Tab</button>