使按鈕變窄而不是水平填滿整個屏幕

Question

我在這個網頁上有這個按鈕，看起來很古怪。它在下面;

我使用angularjs V1材料。

我的網頁的html代碼如下;

<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> 

我想縮小這個按鈕的寬度看起來像一個正常的按鈕。我在其他地方使用了類似的代碼，如<md-button class="md-raised" ng-click="Process()">Button Press</md-button>，除此網頁外，我沒有看到這個拉長的按鈕。

Answer 1

按鈕是填補其容器<md-card>，嘗試把它的另一個容器內，在演示的建議是MD-卡操作：

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

檢查出存儲卡中的動作演示： https://material.angularjs.org/latest/demo/card