将输入与 Datepicker 和文本 div 对齐答案

【问题标题】：Align Input with Datepicker and text div将输入与 Datepicker 和文本 div 对齐
【发布时间】：2016-07-04 20:49:35
【问题描述】：

我正在尝试构建一种由以下部分组成的工具栏（不使用md-toolbar）：

input 按唯一 ID 搜索
datepicker 按日期搜索
div、span、label（或任何可以完成这项工作的）来显示搜索结果的数量

但是，我没有正确对齐这三个元素。

这是我的代码：

<md-content flex layout-padding>
    <md-card>
        <md-card-title>
            <md-card-title-text>
                <div class="md-headline">Simulationen</div>
            </md-card-title-text>
        </md-card-title>
        <md-card-content>
            <div layout="row">
                <md-input-container layout="row" flex="75">
                    <label><span class="fa fa-search"> </span>Suche nach ID</label>
                    <input ng-model="simSearch.input">
                </md-input-container>
                <md-datepicker ng-model="simSearch.date" md-placeholder="Datum wählen"></md-datepicker>
                <div flex="20">Number of search results</div>
            </div>
        </md-card-content>
    </md-card>
</md-content>

为了让任何人都可以使用它，我设置了一个Pen。我没有使用任何自定义 CSS。

【问题讨论】：

标签： html input datepicker alignment angular-material

【解决方案1】：

使用 layout-align 并调整 flex 值 - CodePen

标记

<md-card-content>
    <div layout="row" layout-align="start center">
        <md-input-container layout="row" flex="30">
            <label><span class="fa fa-search"> </span>Search by ID</label>
            <input ng-model="idSearch.input">
        </md-input-container>
        <md-datepicker flex="40" ng-model="idSearch.date" md-placeholder="choose date"></md-datepicker>
        <div flex="30">Number of search results</div>
    </div>
</md-card-content>

https://material.angularjs.org/latest/layout/alignment

对不同的屏幕尺寸使用以下内容：

https://material.angularjs.org/latest/layout/container https://material.angularjs.org/latest/layout/children

【讨论】：