如何使自定义 css 按钮响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20902400/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make custom css button responsive?
提问by user3152357
I have created a CSS button but it is not responsive. I have tried adding EM or %but still not working. I want to change widthand heightaccording to the screen resolution.
我创建了一个 CSS 按钮，但它没有响应。我已经尝试添加EM or %但仍然无法正常工作。我想根据屏幕分辨率更改宽度和高度。
Following is the CSS code I am actually using:
以下是我实际使用的 CSS 代码：
@media only screen and (min-width:321px) and (max-width:480px) { }
HTML
HTML
<div>
<p>
<button class="btn btn-1 btn-1a">Click Here To Enter The Future</button>
</p>
</div>
CSS
CSS
.btn {
font-size:0.875em;
display:block;
left:-60px;
margin-top:35px;
}
Right now the button is moving from left to right, but I want the button to appear at the exact same place.
现在按钮从左向右移动，但我希望按钮出现在完全相同的位置。
回答by Ali Gajani
You could add width:100%;to achieve your objective.
您可以添加width:100%;以实现您的目标。
.btn {
font-size:0.875em;
display:block;
left:-60px;
margin-top:35px;
width:100%;
}
回答by CRABOLO
This should work
这应该工作
.btn {
width: 100%;
min-width: 50px; // add this if you want
max-width: 300px; // add this if you want, adjust accordingly
}
回答by osherdo
This works for me:
这对我有用：
<script>
$(document).ready(function() {
$('#select_preferences').multiselect({
buttonText: function(options, select) {
return 'Look for users that:';
},
buttonTitle: function(options, select) {
var labels = [];
options.each(function() {
labels.push($(this).text()); //get the options in a string. later it would be joined with - seprate between each.
});
if(!labels.length ===0 )
{
$('#range-div').removeClass('hide');
// The class 'hide' hide the content.
//So I remove it so it would be visible.
}
if (labels.length ===0)
$('#range-div').addClass('hide');
//If the labels array is empty - then do use the hide class to hide the range-selector.
return labels.join(' - ');
// the options seperated by ' - '
// This returns the text of th options in labels[].
}
});
