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

Question

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

两个 selects 都在 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

感觉有点hack，不知道有没有人有更好的建议。

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

Answer 1

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

这是代码

<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-container 之间的静态文本元素

Static text element between two md-input-containers

angularjs

angular-material