如何對齊模態中的輸入字段

Question

我有一個800px寬的引導模式。它有兩列相同的大小。左列的輸入字段排列正確。右側的輸入字段不是。我無法弄清楚如何正確排列雙方。我做了一個plunkr，但它沒有顯示左側對齊。它是在我的模式，但對齊。右側的輸入字段需要在模態的右側對齊。如果可能的話，是否有辦法讓選擇框與輸入字段具有相同的高度？ plunkr

@*<style>form {display: table; } p {display: table-row;}label {display: table-cell;} input {display: table-cell;} 
     label, input { 
      margin: 5px 0px; 
     } 
    </style>*@ 
    <div class="vertical-alignment-helper"> 
     <div class=" modal-dialog modal-editJob vertical-align-center"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <h4 class="modal-title custom_align" id="Heading">View/Edit Job</h4> 
        <h3 style="color:blue;font-weight:bold">{{currentItem.JobName}}</h3> 
       </div> 
       <div class="modal-body"> 
        <ul class="nav nav-tabs" role="tablist"> 
         <li class="active"><a href="#Cover" role="tab" data-toggle="tab">Cover</a></li> 
         <li><a href="#Detail" role="tab" data-toggle="tab">Detail</a></li> 
         <li><a href="#Items" role="tab" data-toggle="tab">Items</a></li> 
        </ul> 
        <!--Cover Content--> 
        <div class="tab-content"> 
         <div class="tab-pane active" id="Cover"> 
          <div class="container" style="margin-top:20px"> 
           <form ng-submit="submitJob()" enctype="multipart/form-data"> 
            <fieldset> 
             <div class="col-xs-6"> 
              <p> 
               <label>Number:&nbsp;</label> 
               <input ng-model="currentItem.JobNumber" type="text"> 
               <label>Status:&nbsp;</label> 
               <select ng-model="currentItem.Status"> 
                <option value="Active">Active</option> 
                <option value="InActive">InActive</option> 
                <option value="Complete">Complete</option> 
               </select> 
              </p> 
              <p> 
               <label>Name:&nbsp;</label> 
               <input ng-model="currentItem.JobName" type="text"> 
              </p> 
              <p> 
               <label>Status:&nbsp;</label> 
               <select ng-model="currentItem.Status"> 
                <option value="Active">Active</option> 
                <option value="InActive">InActive</option> 
                <option value="Complete">Complete</option> 
               </select> 
              </p> 
              <p> 
               <label>Hide:&nbsp;</label> 
               <input ng-model="currentItem.JobHidden" type="checkbox"> 
              </p> 
              <p> 
               <label>Address:&nbsp;</label> 
               <input ng-model="currentItem.JobAddress" type="text"> 
              </p> 
              <p> 
               <label>City</label> 
               <input ng-model="currentItem.JobCity" type="text"> 
              </p> 
              <p> 
               <label>State</label> 
               <input ng-model="currentItem.JobState" type="text"> 
              </p> 
              <p> 
               <label>Zipcode</label> 
               <input ng-model="currentItem.JobZipcode" type="text"> 
              </p> 
              <p> 
               <label>TESPM:&nbsp;</label> 
               <input ng-model="currentItem.TESPM" type="text"> 
              </p> 
              <p> 
               <label>TESPM:&nbsp;</label> 
               <select ng-options="employee.EmployeeFirstName + ' ' + employee.EmployeeLastName as employee.EmployeeFirstName + ' ' + employee.EmployeeLastName for employee in employeeArray | filter:{EmployeeIsPM : true}" ng-model="currentItem.TESPM"> 
                <option value="" disabled>Select</option> 
               </select> 
              </p> 
              <p> 
               <label>Original&nbsp;Contract:&nbsp;$</label> 
               <input ng-model="currentItem.OriginalContract" type="text" format="number"> 
              </p> 
              <p> 
               <label>Total&nbsp;CO&nbsp;$</label> 
               <input ng-model="currentItem.TotalCO" type="text" format="number"> 
              </p> 
              <p> 
               <label>Revised&nbsp;Contract&nbsp;$</label> 
               <input ng-model="currentItem.RevisedContract" type="text" format="number"> 
              </p> 
             </div> 
             <div class="col-xs-6"> 
              <p> 
               <label>Customer&nbsp;Name:&nbsp;</label> 
               <input ng-model="currentItem.CustomerName" ng-click="EditJobCustomerModal(currentItem.CustomerId)" type="text" /> 
              </p> 
              <p> 
               <label>Address:&nbsp;</label> 
               <input ng-model="currentItem.CustomerAddress" type="text"> 
              </p> 
              <p> 
               <label>City</label> 
               <input ng-model="currentItem.CustomerCity" type="text"> 
              </p> 
              <p> 
               <label>State</label> 
               <input ng-model="currentItem.CustomerState" type="text"> 
              </p> 
              <p> 
               <label>Zipcode</label> 
               <input ng-model="currentItem.CustomerZipcode" type="text"> 
              </p> 
             </div> 
            </fieldset><br /> 
            <input style="margin-right:20px" ng-click="printEditJobModal(currentItem)" type="button" value="Print" go-click="#" /> 
            <input style="float:right" ng-click="updateJob(currentItem)" type="button" value="Update" go-click="#" /> 
            <input style="float:right; margin-right:20px" type="button" data-dismiss="modal" value="Cancel" go-click="#" /> 
           </form> 
          </div> 
         </div> 
         <div class="tab-pane" id="Detail">...</div> 
         <div class="tab-pane" id="Items">...</div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

而不是給的input元素隨機直列margin-left S，你應該固定寬度增加了label秒。

.inline-fields label { 
    ... 
    width: 80px; /* Choose the width that best fits your needs */ 
    ... 
}