css - 增加文本框的大小

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>

标签： csstwitter-bootstraphtml-tabletextboxsize

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. 在我的示例中，我用它来说明如何使用它。在示例中，您使用一个单元格跨越/重叠两个列单元格。