如何使自定义css按钮响应？

Question

我创建了一个CSS按钮，但它没有响应。我尝试添加EM or %但仍无效。我想根据屏幕分辨率更改<​​em> width 和 height 。

以下是我实际使用的CSS代码：

@media only screen and (min-width:321px) and (max-width:480px) { }

HTML

<div>
   <p>
      <button class="btn btn-1 btn-1a">Click Here To Enter The Future</button> 
   </p>
</div>

CSS

.btn {
  font-size:0.875em;
  display:block;
  left:-60px;
  margin-top:35px;
}

现在按钮正在从左向右移动，但我希望按钮出现在完全相同的位置。

Answer 1

您可以添加width:100%;来实现目标。

.btn {
      font-size:0.875em;
      display:block;
      left:-60px;
      margin-top:35px;
      width:100%;
    }

Answer 2

这应该有效

.btn {
   width: 100%;
   min-width: 50px;  // add this if you want
   max-width: 300px; // add this if  you want, adjust accordingly
}

Answer 3

这对我有用：

<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[].
        }
    });