减少 UI 控件之间的空间答案

【问题标题】：Reduce the space in between the UI controls减少 UI 控件之间的空间
【发布时间】：2016-12-13 11:15:23
【问题描述】：

我正在使用 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 来完成这项工作？

【问题讨论】：

您可以更改 layout-align="start center" 然后在 span、md-select 和 md-select 上应用填充，或者您也可以在这些上使用 flex

标签： css angularjs html angular-material

【解决方案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

【讨论】：