给定一个容器，我想在一行中显示一个按钮列表。
但是，如果一行中没有足够的空间来包含所有按钮，我想改为显示单选按钮。
例如，这个:
应该变成:
但是，这个:
应该保持原样。
是否可以仅使用 CSS 实现此目的？
如果没有，您将如何使用 Javascript 执行此操作？
最佳答案
Jquery解决方案
var num=$('.one button').length
var count=0;
for(var x=0;x < num;x++){
count=count+parseInt($('.one button').eq(x).width()) + parseInt($('.one button').eq(x).css('padding-left')) + parseInt($('.one button').eq(x).css('padding-right'))
}
if(count > $('.one').width()){
$('.one button').each(function(){
var val=$(this).text();
$(this).replaceWith('<input type="radio" />'+val+'</br>')
})
}.container {
padding: 20px;
border: 1px solid black;
}
.one{
width:200px;
}
.one button{
display:inline-block;
}
.one radio{
display:block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container one">
<button>Yes,</button>
<button>it</button>
<button>is</button>
<button>possible</button>
<button>to</button>
<button>achieve</button>
<button>this</button>
</div>
<div class="container">
<button>What</button>
<button>do</button>
<button>you</button>
<button>think?</button>
</div>
</body>你可以改变.one的宽度来查看变化
关于javascript - 如何根据行溢出将按钮列表转换为单选按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30091699/