我正在尝试使用
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个字段未对齐.
我还尝试在< span>％< / span>上使用vertical-align.而不是layout-align =“center center”,但它似乎被忽略了.
解决方法
我找到了使用< 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>
“常规字体”是一些不存在的图标字体库,以确保< md-icon>内的文字.不会被解释为材质图标.
现在它很好地对齐：
您可以在此处查看工作解决方案：http://codepen.io/LukaszWiktor/pen/oXoqYg
