wie man Knopf in der gleichen Box bleiben lässt?

Question

Ich erstelle einen Knopf, aber wenn ich meine Fenster kleiner mache, ist der Knopf aus meiner Box. Es sieht nicht gut aus. Ich habe mich gefragt, wie ich meinen Knopf machen kann, um in der Box zu bleiben. Sehen Sie Bilder, um ein besseres Verständnis zu haben. Ich habe das CSS meiner Schaltfläche zur Verfügung gestellt. Ich bin mir nicht sicher, wie ich eine gute und effiziente Lösung für dieses Problem implementieren kann. Ich konnte mein Problem beheben, indem ich die Breite auf 100% änderte. Jetzt wird mein Brief von meiner Unterseite abgeschnitten. Siehe Bild bitte!

.button { 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t cursor: pointer; 
 
\t outline: none; 
 
\t white-space: nowrap; 
 
// \t margin: 5px; 
 
\t padding: 0 22px; 
 
\t font-size: 14px; 
 
\t font-family: 'Roboto', sans-serif, 'Lato'; 
 
\t height: 40px; 
 
    width: 220px; 
 
\t line-height: 40px; 
 
\t background-color: #428bca; 
 
\t color: #FFF; 
 
\t font-weight: 600; 
 
\t text-transform: uppercase; 
 
\t letter-spacing: 1px; 
 
\t border: none; 
 
\t text-shadow: 1px 1px 1px rgba(0,0,0,0.2); 
 
    margin: 0 auto; 
 
    text-align: center; 
 

 
} 
 
.panel-title { 
 
    margin-top: 0; 
 
    margin-bottom: 0; 
 
    font-size: 16px; 
 
    color: #ffffff; 
 
} 
 

 
.panel-heading { 
 

 
    color: #428bca; 
 
    background-color: #428bca; 
 
    border-top: 1px solid #dddddd; 
 
    \t border-left: 1px solid #dddddd; 
 
    border-right: 1px solid #dddddd; 
 
    //border-top-right-radius: 3px; 
 
    //border-top-left-radius: 3px; 
 
} 
 

 
.panel-body { 
 
    padding: 15px; 
 
    border: 1px solid #dddddd; 
 
} 
 
.nobottommargin { 
 
    margin-bottom: 0 !important; 
 
} 
 
.leftmargin-sm { 
 
    margin-left: 30px !important; 
 
} 
 

 
.button.button-rounded { 
 
\t border-radius: 3px; 
 
} 
 

 
.button.button-reveal { 
 
\t padding: 0 28px; 
 
\t overflow: hidden; 
 
} 
 

 
.button.button-large { 
 
\t padding: 0 26px; 
 
\t font-size: 16px; 
 
\t height: 46px; 
 
\t line-height: 46px; 
 
} 
 

 
.button-teal { 
 
\t background-color: #428bca; 
 
} 
 

 
/*code for the icon */ 
 
.button-reveal i { 
 
    position: absolute; 
 
    width: 2em; 
 
    height: 100%; 
 
    line-height: 45px; 
 
    background-color: rgba(0, 0, 0, .2); 
 
    text-align: center; 
 
    left: -100%; 
 
    transition: left 0.25s ease; 
 
} 
 
.button-reveal:hover i { 
 
    left: 0; 
 
} 
 
/* code for the letters*/ 
 
.button-reveal span { 
 
    display: inline-block; 
 
    margin: 0 2em; 
 
    transition: margin 0.35s ease; 
 
} 
 
.button-reveal:hover span { 
 
    margin: 0 1em 0 3em; 
 
}

<div class="panel-heading"> 
 
\t \t \t \t \t \t \t \t <h2 class="panel-title">Access This Service</h2> 
 
\t \t \t \t \t \t \t </div> 
 

 
<div class="panel-body"> 
 
    <!-- angular --> 
 
    \t \t 
 
    <div ng-if="c.html" ng-bind-html="c.html"></div> 
 

 
<a href="http://zoom.us" class="button button-rounded button-reveal button-large button-teal"><i class="fa fa-forward" aria-hidden="true"></i> 
 
    <span>Go there now!</span></a><br> 
 

 
Note: If you haven’t accessed Zoom before, create a new account at <a href="http://zoom.us">zoom.us</a>. 
 
</div>

Answer 1

.button { 
    box-sizing: border-box; /* Include padding within the button's width */ 
    width: 100%; /* Made the button the full width of its parent */ 
    padding: 0 22px; /* Add 22 pixels of padding to the left and right of the button */ 
} 

Sie wahrscheinlich die Polsterung nicht benötigen, so können Sie einfach tun:

button { 
    width: 100%; 
    padding: 0; 
} 

Answer 2

Die Polsterung der den Text nach rechts drückt und den ‚white-space: nowrap‘ ist der Text zu verhindern, um eine zweite Linie von Einwickeln. Dein Text ist zu breit für den Raum, wenn du das div schmal machst, also muss es irgendwohin gehen. Wenn Sie das Umbrechen zulassen, belegt es zwei Zeilen, wenn die Breite zu schmal ist. Stellen Sie 'min-height' anstelle von 'height' ein, damit die Schaltfläche erweitert werden kann.

button { 
    width: 100%; 
    padding: 0 5px; 
    //height: 40px; 
    min-height: 40px; 
    white-space: normal; 

}