画面全体を水平に塗りつぶすのではなく、ボタンを狭くする

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>のような同様のコードを使用しましたが、このWebページ以外はこの細長いボタンは表示されません。

Answer 1

ボタンは、そのコンテナ<md-card>を充填され、別の容器内に入れてみてください、デモでの勧告はMD-カードアクションです： https://material.angularjs.org/latest/demo/card

：

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

は、カードアクションのデモをご覧ください