使按钮变窄而不是让它横向填满整个屏幕

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-card-actions：

<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