css - AngularJS Material 日期选择器未对齐

Question

我连续有一个按钮和 Angular js Material 日期选择器。日期选择器未正确对齐。我也尝试添加边距。在不使用额外的 CSS 文件的情况下，(在线添加 css)请帮助我对齐这些组件。

  <div>
<md-button class="md-raised md-button job-export-jobs md-ink-ripple">Export Jobs Date</md-button>
<md-input-container>
  <label for="jobDate">Export date</label>
  <md-datepicker  
  ng-model="model.exportJobsDate">
  </md-datepicker>
</md-input-container>

Answer 1

您可以使用layout="row"，然后通过给出分布来使用flex，

<div class='calendarDiv' layout="row">
    <div flex=40>
      <md-icon style="position:absolute;margin-top:15px; left:20px" md-svg-src="calendar.svg"></md-icon>
      <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
    </div>
    <div flex=60>
      <md-button class="md-raised md-button job-export-jobs md-ink-ripple">Export Jobs Date</md-button>
    </div>
  </div>

DEMO