Question

我正在使用Angular Material并在表单上有几个选择输入，我想用一段静态文本分开。

两个选项都在md-input-containers中，因此位于两者之间的文本需要具有相同的填充，因此我不得不使用另一个输入容器来保存静态文本，如下所示：

<div layout="row" flex layout-padding>
    <md-input-container flex>
        <label translate>Select 1</label>
        <md-select ng-model="option1" flex>
            <md-option ng-repeat="option in options">
            </md-option>
        </md-select>
    </md-input-container>
    <md-input-container>
        <label></label>
        <input type="text" value="label" readonly>
    </md-input-container>
    <md-input-container flex>
        <label translate>Select 2</label>
        <md-select ng-model="option2" flex>
            <md-option ng-repeat="option in options">
            </md-option>
        </md-select>
    </md-input-container>
</div>

Working fiddle

感觉有点hacky，我想知道是否有人有更好的建议。

我不希望文本底部有任何边框，我知道我可以滚动自己的CSS，但我想知道是否有一种开箱即用的方式使用AM框架？

Answer 1

很简单。只需在父元素上使用带有span属性的layout-align元素。

这是代码

<div layout="row" flex layout-padding layout-align="start center">
  <md-input-container flex>
    <label translate>Select 1</label>
    <md-select ng-model="option1" flex>
      <md-option ng-repeat="option in options">
      </md-option>
    </md-select>
  </md-input-container>
  <span flex>Label</span>
  <md-input-container flex>
    <label translate>Select 2</label>
    <md-select ng-model="option2" flex>
      <md-option ng-repeat="option in options">
      </md-option>
    </md-select>
  </md-input-container>
</div>

这是工作示例。 http://codepen.io/next1/pen/PzbXpv

两个md-input-containers之间的静态文本元素

1 个答案: