我会尽力解释它。我想把这个原则应用到我自己的原则上。
正如您所看到的,我正在添加'标签'到标签栏。当我添加足够的标签来填充整个标签栏,并且我不断添加更多标签时,这些标签基本上会调整大小以适应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>
有什么建议吗?
答案 0 :(得分:15)
您可以使用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>
答案 1 :(得分:3)
您可以使用display: table
和display: table-cell
:
$("#add").click(function() {
$("<li>", { "class": "tab", "text": "Lorem ipsum" }).appendTo(".tabs");
});
$("#del").click(function() {
$(".tab").last().remove();
});
&#13;
.tabs {
display: table;
border-collapse: collapse;
padding: 0;
}
.tab {
display: table-cell;
width: 200px;
border: 1px solid black;
}
&#13;
<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>
&#13;
答案 2 :(得分:2)
$('.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>
<强>拨弄强>
答案 3 :(得分:0)
您可以使用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;
}