我有一个800px宽的bootstrap模式。它有两个相同大小的列。左栏中的输入字段排队正常。右边的输入字段不是。我无法弄清楚如何正确排列双方。我做了一个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: </label>
<input ng-model="currentItem.JobNumber" type="text">
<label>Status: </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: </label>
<input ng-model="currentItem.JobName" type="text">
</p>
<p>
<label>Status: </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: </label>
<input ng-model="currentItem.JobHidden" type="checkbox">
</p>
<p>
<label>Address: </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: </label>
<input ng-model="currentItem.TESPM" type="text">
</p>
<p>
<label>TESPM: </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 Contract: $</label>
<input ng-model="currentItem.OriginalContract" type="text" format="number">
</p>
<p>
<label>Total CO $</label>
<input ng-model="currentItem.TotalCO" type="text" format="number">
</p>
<p>
<label>Revised Contract $</label>
<input ng-model="currentItem.RevisedContract" type="text" format="number">
</p>
</div>
<div class="col-xs-6">
<p>
<label>Customer Name: </label>
<input ng-model="currentItem.CustomerName" ng-click="EditJobCustomerModal(currentItem.CustomerId)" type="text" />
</p>
<p>
<label>Address: </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>
答案 0 :(得分：0)
您应该为input添加固定宽度，而不是将margin-left元素随机内联label s。
.inline-fields label {
...
width: 80px; /* Choose the width that best fits your needs */
...
}