我正在使用ASP.NET,它使用所有默认的JavaScript库,例如Bootstrap,jQuery和...
我要\\自定义Visual Studio生成的EDIT视图。我想为表格单元格应用样式,但是我的css无法正常工作,并且下拉列表不在中间垂直
我尝试了跟随CSS,但是没有一个起作用
<style type="text/css">
#tb_dataentry td {
vertical-align: auto;
}
</style>
<style type="text/css">
td {
vertical-align: auto;
}
</style>
#tb_dataentry
是我的桌子的ID。
我也用middle
,而不是auto
和使用!important
这个词,但没有运气。
如果我对每个TD使用相同的样式,则可以使用,但是我想在一个地方进行。
这是我表的html
<table id="tb_dataentry">
<tr>
<td style="vertical-align:auto">
@Html.LabelFor(model => model.PropertyType, htmlAttributes: new { @class = "control-label col-md-2" })
</td>
<td>
<div class="form-group">
<div class="col-md-10">
@Html.EnumDropDownListFor(model => model.PropertyType, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.PropertyType, "", new { @class = "text-danger" })
</div>
</div>
</td>
编辑:编译的HTML
...... many things above this line
<style type="text/css">
td {
vertical-align: middle;
}
</style>
<!-- Start page content -->
<section id="page-content" class="page-wrapper">
<div class="about-sheltek-area ptb-115">
<div class="container">
<div class="row">
<form action="/ManageProperties/Edit/1" method="post">
<input name="__RequestVerificationToken" type="hidden" value="3_tLe9pLOu0CiWg8X81ivfdT0rjyvb4XnCIyAeR0k8uoP8FE_3hMA3xtZh2igj_9Q3SMGBb5WxdxEkNeNkZrTP-WeGpGugHOKVZ7Zxa_8n81" />
<div class="form-horizontal">
<h4>Property</h4>
<hr />
<input data-val="true" data-val-number="The field PropertyId must be a number." data-val-required="The PropertyId field is required." id="PropertyId" name="PropertyId" type="hidden" value="1" />
<table id="tb_dataentry">
<tr>
<td>
<label class="control-label col-md-2" for="PropertyType">PropertyType</label>
</td>
<td>
<div class="form-group">
<div class="col-md-10">
<select class="form-control" data-val="true" data-val-required="The PropertyType field is required." id="PropertyType" name="PropertyType">
<option value="0">Apartment</option>
<option selected="selected" value="1">Condo</option>
<option value="2">SingleFamily</option>
<option value="3">MultiFamity</option>
<option value="4">Villa</option>
<option value="5">Suite</option>
</select>
<span class="field-validation-valid text-danger" data-valmsg-for="PropertyType" data-valmsg-replace="true"/>
</div>
auto
是vertical-align
属性的无效值。默认值为initial
您可以在此处查看有效值http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
您可以通过编辑.form-group
行为来进行大小写对齐-它应该具有inline-block
显示模式,在这种情况下,vertical-align
属性可以处理其行为
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
#tb_dataentry td {
vertical-align: middle;
border: 1px solid red;
}
.form-group {
margin-bottom: 0 !important;
display: inline-block;
vertical-align: middle;
}
.control-label {
padding-top: 0 !important;
margin-bottom: 0 !important;
}
</style>
<!-- Start page content -->
<section id="page-content" class="page-wrapper">
<div class="about-sheltek-area ptb-115">
<div class="container">
<div class="row">
<form action="/ManageProperties/Edit/1" method="post">
<input name="__RequestVerificationToken" type="hidden" value="3_tLe9pLOu0CiWg8X81ivfdT0rjyvb4XnCIyAeR0k8uoP8FE_3hMA3xtZh2igj_9Q3SMGBb5WxdxEkNeNkZrTP-WeGpGugHOKVZ7Zxa_8n81" />
<div class="form-horizontal">
<h4>Property</h4>
<hr />
<input data-val="true" data-val-number="The field PropertyId must be a number." data-val-required="The PropertyId field is required." id="PropertyId" name="PropertyId" type="hidden" value="1" />
<table id="tb_dataentry">
<tr>
<td>
<label class="control-label col-md-2" for="PropertyType">PropertyType</label>
</td>
<td>
<div class="form-group">
<div class="col-md-10">
<select class="form-control" data-val="true" data-val-required="The PropertyType field is required." id="PropertyType" name="PropertyType">
<option value="0">Apartment</option>
<option selected="selected" value="1">Condo</option>
<option value="2">SingleFamily</option>
<option value="3">MultiFamity</option>
<option value="4">Villa</option>
<option value="5">Suite</option>
</select>
<span class="field-validation-valid text-danger" data-valmsg-for="PropertyType" data-valmsg-replace="true" />
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句