在添加新元素時收縮div元素

我會盡我所能地盡力解釋它。我想把這個原則應用於我自己。在添加新元素時收縮div元素

正如你可以看到我添加「標籤」到標籤欄。當我添加足夠的標籤填充整個標籤欄，並且我不斷添加更多時，這些標籤基本上調整大小以適應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

有什麼建議？

來源

2016-08-26 Dino

你可以用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>

來源

2016-08-26 08:25:32

您可以使用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; 
}

來源

2016-08-26 08:14:55

你忘了加上小提琴 –

你忘了刪除'.nav-tabs> li {float}：none！important; display：inline-block！important; }'https://jsfiddle.net/272p06ng/13/ –

只要玩最小和最大寬度的屬性https://jsfiddle.net/272p06ng/14/ –

$('.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/

來源

2016-08-26 08:31:08

您可以使用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>

來源

2016-08-26 10:46:45

在添加新元素時收縮div元素

回答

相關問題