it-swarm.com.de

Wie kann ich eine benutzerdefinierte CSS-Schaltfläche aktivieren?

Ich habe eine CSS-Schaltfläche erstellt, die jedoch nicht reagiert. Ich habe versucht, EM or % hinzuzufügen, aber es funktioniert immer noch nicht. Ich möchte width und height entsprechend der Bildschirmauflösung ändern.

Im Folgenden ist der CSS-Code aufgeführt, den ich aktuell verwende:

@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;
}

Im Moment bewegt sich die Schaltfläche von links nach rechts, aber ich möchte, dass die Schaltfläche genau an derselben Stelle angezeigt wird.

4
user3152357

Sie können width:100%; hinzufügen, um Ihr Ziel zu erreichen.

enter image description here

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

Das funktioniert bei mir:

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

Das sollte funktionieren

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