html - 使按钮变窄而不是让它水平填满整个屏幕

Question

我在这个网页上有一个看起来很长的按钮。在下面；

我正在使用 angularjs v1 Material 。

我的网页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