css - 带插件的 Angular Material 输入

Question

我正在尝试使用 angular-material 创建一个带有额外文本的输入.我想达到与 bootstrap's .input-group-addon 类似的效果:

我得到的最接近的是this :

<md-content layout-padding>
    <div layout="row" class="md-whiteframe-z1" style="width: 40%">
        <md-select placeholder="Type" ng-model="discount.type" flex="50" class="md-select-full-width">
            <md-option value="AMOUNT">Amount</md-option>
            <md-option value="PERCENT">Percent</md-option>
        </md-select>
        <div flex="50" layout="row" layout-align="center center">
            <md-input-container flex>
                <label>Value</label>
                <input ng-model="discount.value">
            </md-input-container>
            <span>%</span>
        </div>
    </div>
</md-content>

什么给出了以下结果:

如您所见，2 个字段未对齐。

我也尝试使用 vertical-align在 <span>%</span> 上而不是 layout-align="center center"但它似乎被忽略了。

Answer 1

我想出了一个使用 <md-icon> 的解决方案:

<md-content layout-padding>
    <div layout="row" class="md-whiteframe-z1" style="width: 40%">
        <md-select placeholder="Type" ng-model="discount.type" flex="50" class="md-select-full-width">
            <md-option value="AMOUNT">Amount</md-option>
            <md-option value="PERCENT">Percent</md-option>
        </md-select>
        <div flex="50" layout="row">
            <md-input-container flex>
                <label>Value</label>
                <input ng-model="discount.value">
            </md-input-container>
            <md-icon md-font-set="regular-font">%</md-icon>
        </div>
    </div>
</md-content>

"regular-font"是一些不存在的图标字体库，以确保里面的文字 <md-icon>不会被解释为 Material 图标。

现在它很好地对齐了:

您可以在此处查看有效的解决方案:http://codepen.io/LukaszWiktor/pen/oXoqYg