html - 如何对齐 Angular-Material 工具栏中的文本输入？

Question

我在尝试将输入元素与 Angular Material 工具栏上的按钮对齐时遇到问题。

这是一支密码笔:http://codepen.io/curtwagner1984/pen/amgdXj

这是我的 html:

<md-toolbar class="md-hue-1" layout-align="start center" style="min-height:15px; height: 50px" ng-show="$ctrl.showSearch">
    <div class="md-toolbar-tools">
        <md-button ng-click="$ctrl.showSearch = !$ctrl.showSearch">
            back
        </md-button>
        <md-input-container flex="">
            <input ng-model="searchInput" placeholder="Search here">
        </md-input-container>
        <md-input-container>
            <md-select ng-model="$ctrl.test">
                <md-option value="Option 1 Not Align">Option 1</md-option>
                <md-option value="Option 2 Not Align">Option 2</md-option>
            </md-select>
        </md-input-container>

        <md-button ng-click="$ctrl.showSearch = !$ctrl.showSearch">
            Search
        </md-button>
        <md-button ng-click="showListBottomSheet($event)">
            settings
        </md-button>
    </div>

</md-toolbar>

CSS 是默认的 Angular Material CSS 文件。如果有人能指出我如何在此处实现对齐，我会很高兴。

我也调查了这个:http://blog.sodhanalibrary.com/2015/07/header-design-with-angularjs-material-ui.html#.WBS-Y-B96Uk但是没有找到好的解决方案，当我尝试他们的代码时，我在工具栏中的输入容器仍然没有对齐。

Answer 1

这是一种方法 - CodePen

需要注意的是:

• 删除 class="md-toolbar-tools"
• 将 md-select 放入 md-container
• 将两个 md-input-container 放在一个 div 中

这使用 Angular Material 做事方式并且不需要额外的 CSS。

编辑 1:如果您希望 md-toolbar 的高度为 50px，您可以轻松地将其样式设置为这样但是输入标签会离开屏幕.

编辑 2:如果您想要 50 像素的高度而不让标签离开屏幕，您可以将 md-no-float 属性添加到 md-input-container .

标记

<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak="" class="autocompletedemoBasicUsage" ng-app="MyApp">

  <md-toolbar class="md-hue-1" ng-show="true">
    <div layout="row" layout-align="start center">
      <md-button ng-click="$ctrl.showSearch = !$ctrl.showSearch">
        back
      </md-button>
      <div layout="row" flex>
        <md-input-container flex>
          <input ng-model="searchInput" placeholder="Search here">
        </md-input-container>
        <md-input-container flex>
          <md-select ng-model="$ctrl.test">
            <md-option value="Option 1 Not Align">Option 1</md-option>
            <md-option value="Option 2 Not Align">Option 2</md-option>
          </md-select>
        </md-input-container>
      </div>
      <md-button ng-click="$ctrl.showSearch = !$ctrl.showSearch">
        Search
      </md-button>
      <md-button ng-click="showListBottomSheet($event)">
        settings
      </md-button>
    </div>

  </md-toolbar>
</div>