CSS不适用于表TD

闪烁

我正在使用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>

查看HTML图像

草莓

autovertical-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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章