缩小UI控件

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

正如您在图像中看到的那样，UI控件之间的空间相距太远。我希望差距要小得多。如何更改html或/和css以完成此操作？

Answer 1

将layout-align更改为start center，并为div中的元素添加一些边距。

...
<div layout="row" class="spaced-children" layout-align="start center">
...

CSS：

.spaced-children > * {
  margin-right:20px;
}    

https://plnkr.co/edit/XhYvJFJJXGO0v20eWCBw?p=preview