我在尝试使用角度材料在同一行上包含输入组和几个按钮时遇到了一些麻烦.
以下HTML结构生成您可以在其下方的图像上看到的结果,这不是我想要的：
<section layout-align="end center" layout-padding flex>
<div layout="row" layout-align="start center" flex>
<div class="input-group">
<input type="text" class="form-control" ng-model="monitor.query" placeholder="Search reports" aria-describedby="addon">
<span class="input-group-addon" id="addon"><i class="fa fa-search"></i></span>
</div>
</div>
<section layout-padding>
<md-button class="md-primary" data-dismiss="modal" type="submit" id="submit" value="Submit" ng-click="monitor.newReport();">New Report</md-button>
<md-button class="md-hollow disabled" data-dismiss="modal" type="button">Export</md-button>
</section>
</section>
但是,如果我尝试在同一layout =“row”中包含所有元素,则输入组最终占用所有空间并将按钮推出父div：
<section class="no-print" layout-align="end center" layout-padding flex>
<div layout="row" layout-align="start center" flex>
<div class="input-group">
<input type="text" class="form-control" ng-model="monitor.query" placeholder="Search reports" aria-describedby="addon">
<span class="input-group-addon" id="addon"><i class="fa fa-search"></i></span>
</div>
<md-button class="md-primary" data-dismiss="modal" type="submit" id="submit" value="Submit" ng-click="monitor.newReport();">New Report</md-button>
<md-button class="md-hollow disabled" data-dismiss="modal" type="button">Export</md-button>
</div>
</section>
是否有正确的方法使用角度材料将输入组和几个按钮全部放在同一条线上,或者我是否必须创建自己的样式？
解决方法
请尝试以下代码：
<form layout layout-align="center" layout-padding>
<div layout="row" flex>
<md-input-container flex class="md-icon-float md-block md-title">
<label>Your font number</label>
<!-- below is the material icons -->
<md-icon class="material-icons">phone</md-icon>
<input type="text">
</md-input-container>
<div>
<md-button class="md-raised">
<!-- below is the material icons -->
<md-icon class="material-icons">search</md-icon>
</md-button>
</div>
</div>
</form>
请参阅以下链接中的示例
http://codepen.io/cmwang-cottageclothing/pen/BjpdVQ?editors=1000
