Knopf schmaler machen, anstatt den gesamten Bildschirm horizontal zu füllen

Question

Ich habe diesen Knopf auf dieser Webseite, der seltsam lang aussieht. Hier ist es unten;

Ich bin AngularJS v1 Materialien.

Der HTML-Code für meine Webseite ist wie folgt;

<md-card> 
    <md-card-title> 
     <md-card-title-text> 
      <span class="md-headline">Room settings</span> 
     </md-card-title-text> 
    </md-card-title> 
    <md-card-content> 
     <div layout="row" layout-align="space-between center"> 
      <span>Room</span> 
      <md-select ng-model="mode" placeholder="Mode1" class="md-no-underline"> 
       <md-option value="auto">Mode1</md-option> 
       <md-option value="manual">Mode2</md-option> 
      </md-select> 
      <md-select ng-model="channel_number" placeholder="1" class="md-no-underline"> 
       <md-option value="1">1</md-option> 
       <md-option value="2">2</md-option> 
       <md-option value="3">3</md-option> 
      </md-select> 
     </div> 
    </md-card-content> 

    <md-button class="md-raised" ng-click="Process()">Button Press</md-button> 
<md-card> 

Ich möchte die Breite dieser Schaltfläche verkleinern, um wie eine normale Schaltfläche aussehen. Ich habe ähnlichen Code wie <md-button class="md-raised" ng-click="Process()">Button Press</md-button> woanders verwendet und ich sehe diesen länglichen Knopf dort außer auf dieser Webseite nicht.

Answer 1

Der Knopf <md-card> Behälter füllt, versuchen Sie es in einem anderen Behälter setzen, ist die Empfehlung in den Demos md-Card-Aktionen:

<md-card-actions layout="row" layout-align="end center"> 
    <md-button>Action 1</md-button> 
    <md-button>Action 2</md-button> 
</md-card-actions> 

Überprüfen Sie die Karte Aktion Demo aus: https://material.angularjs.org/latest/demo/card