css - 一个父div下有两个子div和两个子input，如图１，如何使他们对齐成图2的样子?

问题描述

问 题

图１

图２

 <div class="red-packet-initialization">
    <wm-datetime-picker
      picker-id="waitDurationBeginDatePicker"
      placeholder="开始时间"
      format-type="YYYY-MM-DD HH:mm:ss"
      min-date-picker-id="waitDurationEndDatePicker"
      time-handler="redpack.selectDate('waitDuration')"
      ng-model="redpack.startTime"
      icon="calendar"
      more-than-today="true">
    </wm-datetime-picker>
    <wm-datetime-picker
      picker-id="waitDurationEndDatePicker"
      placeholder="结束时间"
      format-type="YYYY-MM-DD HH:mm:ss"
      max-date-picker-id="waitDurationBeginDatePicker"
      time-handler="redpack.selectDate('waitDuration')"
      ng-model="redpack.endTime"
      icon="calendar"
      more-than-today="true">
    </wm-datetime-picker>
    <input type="search" maxlength="" class="form-control ng-isolate-scope ng-pristine ng-valid" placeholder="{{'total_budget' | translate}}" ng-model="redpacket.totalBudget" />
    <input type="search" maxlength="" class="form-control ng-isolate-scope ng-pristine ng-valid" placeholder="{{'leave_number' | translate}}" ng-model="redpacket.leaveNum" />
    <button class="btn btn-listheader ng-scope" ng-class="{'btn-success': !redpacket.isStart, 'btn-danger': redpacket.isStart}" ng-click="redpacket.start()">{{redpacket.btnText | translate}}</button>
  </div>

wm-datetime-picker是一个日历控件，可以直接当成一个div

.red-packet-initialization {
   margin: 20px 0 30px 0;
   input,
   div {
     display: inline-block;
     width: 200px;
   }
}

解决方案

.red-packet-initialization {
   margin: 20px 0 30px 0;
   input,
   div {
     display: inline-block;
     width: 200px;
     vertical-align: middle;
   }
}

这篇关于css - 一个父div下有两个子div和两个子input，如图１，如何使他们对齐成图2的样子?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！