所以需求是，这里的tabs或者wizard必须默认显示全名，不活动的要根据右边的可用空间缩小。知道我们如何实现这一目标吗？
默认情况下，按钮的宽度为:自动。但是当没有。按钮的数量越来越多，当右边的空间开始减少时，不活动的按钮必须缩小。
最佳答案
我觉得你看起来像这样:
//Number of elemnts
let count = $('li').length;
//Width of each element
let width = 100 / count;
$('li').css('width', width + '%');
//Width of elements container (ul)
let ulWidth = parseFloat($("ul").css("width"));
for (let i = 0; i< count; i++) {
$($('li')[i]).click(function() {
//Reset elements width
$('li').css('width', 'auto');
//Add active class to clicked element
$('li').removeClass('active');
$($('li')[i]).addClass('active');
if ( $('li').hasClass('active') ) {
//Width of active element
let activeWidth = parseFloat($("li.active").css("width"));
let activeWidthPerc = (activeWidth * 100) / ulWidth;
//Width of the rest of the elements
let generalWidth = (100 - activeWidthPerc) / (count - 1);
//Will only adapt when the active element is smaller than the rest of the elements
if (activeWidthPerc < generalWidth) {
$('li').css('width', width + '%');
} else {
$('li').css('width', generalWidth + '%'); //Set width to rest of the elements
$('li.active').css('width', activeWidthPerc + '%'); //Set width to active element
}
}
});
}@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
nav {
width: 80%;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}
ul {
width: 100%;
}
li {
list-style: none;
float: left;
padding: 10px;
text-align: center;
background: #EEEEEE;
cursor: pointer;
color: #777;
border-right: 1px solid #999;
display: flex;
align-items: center;
justify-content: center;
}
li:last-child {
border-right: none;
}
p {
font-size: 20px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
i {
vertical-align: bottom;
margin-right: 5px;
}
.active {
background: #3C8CBD;
color: #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<nav>
<ul>
<!--Try to add more li elements-->
<li>
<i class="material-icons">home</i><p>Home</p>
</li>
<li>
<i class="material-icons">airplanemode_active</i><p>Plane</p>
</li>
<li>
<i class="material-icons">directions_car</i><p>Car</p>
</li>
<li>
<i class="material-icons">people</i><p>People</p>
</li>
</ul>
</nav>
</body>您可以在此处找到完整示例 https://codepen.io/Nacorga/pen/MqaLGK
希望对你有帮助;)
关于javascript - 按钮 : dynamically adjust size based on the space available，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52003196/