Question

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

Answer 1

auto不是vertical-align属性的有效值。默认值为initial

您可以在此处查看有效值http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

您的案例对齐可以通过编辑.form-group行为来完成 - 它应该具有inline-block显示模式，在这种情况下vertical-align属性可以处理其行为

＆＃13;

<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>

＆＃13;

CSS不适用于表td

1 个答案: