增加文本框的大小

Question

我已经创建了一个表格，并使用表格来显示它。一个字段Full Name应该很大，因此我使用了colspan=2，但是“编辑器”或“输入”框的大小没有增加，如下图所示。

到目前为止，这是我的代码。请帮我。

<tr>
  <td>
    <div class="form-group">
      @Html.LabelFor(m => m.EmpID, htmlAttributes: new { @class = "control-label col-md-5 first" })

      <div class="col-md-7">
        @Html.EditorFor(model => model.EmpID, new { htmlAttributes = new { @class = "form-control", disabled = "disabled" } }) @Html.ValidationMessageFor(m => m.EmpID, "", new { @class = "text-danger" })
      </div>
    </div>
  </td>

  <td colspan="2">
    <div class="form-group">
      @Html.LabelFor(model => model.FullName, htmlAttributes: new { @class = "control-label col-md-2" })


      <div class="col-md-10">
        @Html.EditorFor(model => model.FullName, new { htmlAttributes = new { @class = "form-control long-textbox", disabled = "disabled" } }) @Html.ValidationMessageFor(model => model.FullName, "", new { @class = "text-danger" })
      </div>
    </div>
  </td>

</tr>

Answer 1

您可以在标签（全名）和输入字段中添加一个类，并指定每个元素应占用的宽度。

在我的示例中，标签的宽度设置为150px，输入字段的宽度设置为100% - 150px。使用calc()函数，您可以在CSS中计算值。

table {
  width: 100%;
}

td {
  border: 1px solid #ccc;
  padding: 1rem;
}

/* specify how width the text label will be. */
label.full-width{
  width: 150px;
}

/* specify the width of 100% - the width from the label */
input.full-width {
  width: calc(100% - 150px);
  float: right;
}

<table>
  <tr>
    <td>row 1 - col 1</td>
    <td>row 1 - col 2</td>
  </tr>
  <tr>
    <td colspan=2>
      <label class="full-width">Full Name</label>
      <input class="full-width">
    </td>
  </tr>

此外，在您的代码中，无需使用colspan=2。在我的示例中，我用它来说明如何使用它。在该示例中，您将两个列单元格与一个单元格跨接/重叠。