Html 浏览器上的文本框对齐受到干扰
下面是我在表结构中的DOM元素代码Html 浏览器上的文本框对齐受到干扰,html,twitter-bootstrap,google-chrome,internet-explorer,mozilla,Html,Twitter Bootstrap,Google Chrome,Internet Explorer,Mozilla,下面是我在表结构中的DOM元素代码 <table > <tr > <td> <label>Period:</label> </td> <td> @Html.DropDownList("Period", new List<SelectListItem>() {
<table >
<tr >
<td>
<label>Period:</label>
</td>
<td>
@Html.DropDownList("Period", new List<SelectListItem>() {
new SelectListItem{Text = "Last 7 Days", Value = "6"},
new SelectListItem{Text = "Last 15 Days", Value = "14"},
new SelectListItem{Text = "Last 30 Days", Value = "29"},
new SelectListItem{Text = "Last 90 Days", Value = "89"},
new SelectListItem{Text = "Last 180 Days", Value = "179"},
new SelectListItem{Text = "Last 365 Days", Value = "364", Selected = true},
new SelectListItem{Text = "Custom", Value = "0"}
}, new { @style="margin-right:10px;"})
</td>
<td>
<input type="text" id="FromDatePicker" readonly="readonly" placeholder="From Date"
style="display: none; width: 76px;min-width: 40px;line-height: 25px;margin-right: 3px;">
</td>
<td >
<input type="text" id="ToDatePicker" readonly="readonly" placeholder="To Date"
style="display: none; width: 76px;min-width: 40px;line-height: 25px;">
</td>
</tr>
</table>
<div class="row" style="padding-top:10px;">
<div class="col-lg-6 col-md-6 col-sm-4 col-xs-4">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label>Period:</label>
</div>
<div class="col-lg-offset-1 col-lg-8 col-md-offset-1 col-md-8 col-sm-1 col-xs-1">
@Html.DropDownList("Period", new List<SelectListItem>() {
new SelectListItem{Text = "Last 7 Days", Value = "6"},
new SelectListItem{Text = "Last 15 Days", Value = "14"},
new SelectListItem{Text = "Last 30 Days", Value = "29"},
new SelectListItem{Text = "Last 90 Days", Value = "89"},
new SelectListItem{Text = "Last 180 Days", Value = "179"},
new SelectListItem{Text = "Last 365 Days", Value = "364", Selected = true},
new SelectListItem{Text = "Custom", Value = "0"}
})
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<input type="text" id="FromDatePicker" readonly="readonly" placeholder="From Date" style="display: none; width: 100%; min-width:72px; line-height: 25px;">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<input type="text" id="ToDatePicker" readonly="readonly" placeholder="To Date" style="display: none; width: 100%; min-width:72px; line-height: 25px; ">
</div>
</div>
</div>
</div>
下面是使用div的相同元素的DOM元素结构,bootstrap结构
<table >
<tr >
<td>
<label>Period:</label>
</td>
<td>
@Html.DropDownList("Period", new List<SelectListItem>() {
new SelectListItem{Text = "Last 7 Days", Value = "6"},
new SelectListItem{Text = "Last 15 Days", Value = "14"},
new SelectListItem{Text = "Last 30 Days", Value = "29"},
new SelectListItem{Text = "Last 90 Days", Value = "89"},
new SelectListItem{Text = "Last 180 Days", Value = "179"},
new SelectListItem{Text = "Last 365 Days", Value = "364", Selected = true},
new SelectListItem{Text = "Custom", Value = "0"}
}, new { @style="margin-right:10px;"})
</td>
<td>
<input type="text" id="FromDatePicker" readonly="readonly" placeholder="From Date"
style="display: none; width: 76px;min-width: 40px;line-height: 25px;margin-right: 3px;">
</td>
<td >
<input type="text" id="ToDatePicker" readonly="readonly" placeholder="To Date"
style="display: none; width: 76px;min-width: 40px;line-height: 25px;">
</td>
</tr>
</table>
<div class="row" style="padding-top:10px;">
<div class="col-lg-6 col-md-6 col-sm-4 col-xs-4">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label>Period:</label>
</div>
<div class="col-lg-offset-1 col-lg-8 col-md-offset-1 col-md-8 col-sm-1 col-xs-1">
@Html.DropDownList("Period", new List<SelectListItem>() {
new SelectListItem{Text = "Last 7 Days", Value = "6"},
new SelectListItem{Text = "Last 15 Days", Value = "14"},
new SelectListItem{Text = "Last 30 Days", Value = "29"},
new SelectListItem{Text = "Last 90 Days", Value = "89"},
new SelectListItem{Text = "Last 180 Days", Value = "179"},
new SelectListItem{Text = "Last 365 Days", Value = "364", Selected = true},
new SelectListItem{Text = "Custom", Value = "0"}
})
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 ">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<input type="text" id="FromDatePicker" readonly="readonly" placeholder="From Date" style="display: none; width: 100%; min-width:72px; line-height: 25px;">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<input type="text" id="ToDatePicker" readonly="readonly" placeholder="To Date" style="display: none; width: 100%; min-width:72px; line-height: 25px; ">
</div>
</div>
</div>
</div>
请参考附带的两种输出格式的屏幕截图。问题只在于Mozilla,即在chrome上一切都很好。
参考
请帮忙
style="vertical-align:bottom;"
成功了