使html表单中的所有文本框都在同一点结束答案

【问题标题】：Make all the textboxes in a html form end at the same point使html表单中的所有文本框都在同一点结束
【发布时间】：2016-06-17 05:41:57
【问题描述】：

我正在尝试使表单看起来如下面的屏幕截图所示。文本框应在文本之后立即开始，并且所有文本框都应在同一点结束。

我现有的标记如下：

 .txtbig {
   width: 100%;
 }

<table style="border: 1px solid black; border-image: none; width: 100%;">
  <tbody>
    <tr>
      <td class="tableBody1" colspan="4">
        <strong>Intended Recipient Information</strong>
      </td>
    </tr>
    <tr>
      <td>
        Name and Title
      </td>
      <td colspan="2">
        <input name="txtRecpNameTitle" class="txtbig" id="txtRecpNameTitle" type="text" maxlength="255">

      </td>
      <td style="width: 11px;">
        <span id="RequiredFieldValidator23"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>

      </td>
    </tr>
    <tr>
      <td>
        Company Name and Division</td>
      <td colspan="2">
        <input name="txtRecpCompanyNameDiv" class="txtbig" id="txtRecpCompanyNameDiv" type="text" maxlength="255">

      </td>
      <td>
        <span id="RequiredFieldValidator24"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>

      </td>
    </tr>
    <tr>
      <td>
        Complete Mailing Address</td>
      <td colspan="2">
        <input name="txtRecpCompleteMailAddress" class="txtbig" id="txtRecpCompleteMailAddress" type="text" maxlength="255">

      </td>
      <td>
        <span id="RequiredFieldValidator25"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>

      </td>
    </tr>
    <tr>
      <td>
        Direct Telephone No.</td>
      <td colspan="2">
        <input name="txtRecpDirectTelNo" class="txtbig" id="txtRecpDirectTelNo" type="text" maxlength="255">

      </td>
      <td>
        <span id="RequiredFieldValidator26"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>

      </td>
    </tr>
    <tr>
      <td>
        Email Address</td>
      <td colspan="2">
        <input name="txtRecpEmailAddress" class="txtbig" id="txtRecpEmailAddress" type="text" maxlength="255">

      </td>
      <td>
        <span id="RequiredFieldValidator27"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>

      </td>
    </tr>
    <tr>
      <td>
        Intended Application</td>
      <td colspan="2">
        <input name="txtRecpIntendedApp" class="txtbig" id="txtRecpIntendedApp" type="text" maxlength="255">

      </td>
      <td>
        <span id="RequiredFieldValidator28"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>

      </td>
    </tr>
  </tbody>
</table>

感谢您的建议。

【问题讨论】：

不可能按照您在表格中的方式进行。表格列将自动调整为至少与最宽标签相同的宽度。尝试将它们放在一个表格元素中并使用标签而不是文本
您不应该将表格用于布局目的，仅用于表格数据！
table, tr, tr display 可以被重置和 flex 用于第一次接近/测试。 label 和 fieldset 确实会在这里做得很好

标签： html css

【解决方案1】：

考虑使用引导程序进行此布局！

查看此链接：

http://getbootstrap.com/css/#forms-horizontal

【讨论】：

我同意您的解决方案，但我必须重新设计整个 html 页面以使用引导程序设计布局。它也消耗了我很多时间。因此，寻找一个包含我现有方法的解决方案，即使用表格。

【解决方案2】：

使用下面的css：

table tr td:first-child{
  width:20%; //editable as per your design requirement
}

这将为 table 的所有第一个 td 设置一个固定宽度，其他 td 将具有相同的宽度，这意味着您的 textarea 将具有相同的宽度

【讨论】：

【解决方案3】：

您可以使用Display:flex 并重写HTML 或重置表格元素的显示值（参见第二个sn-p）：

div {
  border: solid;
}
p {
  display: flex;
  padding: 0.25em 0;
  margin: 0;
}
input {
  flex: 1;
  margin: 0 0.5em;
}
/* fun */

p:nth-child(even) {
  background: lightgray;
}

<div>
  <h1>
        <strong>Intended Recipient Information</strong>
</h1>
  <p>
    Name and Title
    <input name="txtRecpNameTitle" class="txtbig" id="txtRecpNameTitle" type="text" maxlength="255"><span id="RequiredFieldValidator23"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>
  </p>
  <p>
    Company Name and Division
    <input name="txtRecpCompanyNameDiv" class="txtbig" id="txtRecpCompanyNameDiv" type="text" maxlength="255">
    <span id="RequiredFieldValidator24"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>
  </p>
  <p>
    Complete Mailing Address
    <input name="txtRecpCompleteMailAddress" class="txtbig" id="txtRecpCompleteMailAddress" type="text" maxlength="255">
    <span id="RequiredFieldValidator25"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>
  </p>
  <p>
    Direct Telephone No.
    <input name="txtRecpDirectTelNo" class="txtbig" id="txtRecpDirectTelNo" type="text" maxlength="255">
    <span id="RequiredFieldValidator26"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span> 
  </p>
  <p>
    Email Address
    <input name="txtRecpEmailAddress" class="txtbig" id="txtRecpEmailAddress" type="text" maxlength="255">
    <span id="RequiredFieldValidator27"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>
  </p>
  <p>
    Intended Application
    <input name="txtRecpIntendedApp" class="txtbig" id="txtRecpIntendedApp" type="text" maxlength="255">
    <span id="RequiredFieldValidator28"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>
  </p>
</div>

tr, 
[colspan="2"] {
  display:flex;
  }
td {
  display:inline-block;
  padding: 0.25em 0;
  }

[colspan],input { 
  flex:1;
  margin:0 0.125em
  }
/* fun */
tr:nth-child(even) {
  background:lightgray;
  }

<table style="border: 1px solid black; border-image: none; width: 100%;">
  <tbody>
    <tr>
      <td class="tableBody1" colspan="4">
        <strong>Intended Recipient Information</strong>
      </td>
    </tr>
    <tr>
      <td>
        Name and Title
      </td>
      <td colspan="2">
        <input name="txtRecpNameTitle" class="txtbig" id="txtRecpNameTitle" type="text" maxlength="255">

      </td>
      <td >
        <span id="RequiredFieldValidator23"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>

      </td>
    </tr>
    <tr>
      <td>
        Company Name and Division</td>
      <td colspan="2">
        <input name="txtRecpCompanyNameDiv" class="txtbig" id="txtRecpCompanyNameDiv" type="text" maxlength="255">

      </td>
      <td>
        <span id="RequiredFieldValidator24"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>

      </td>
    </tr>
    <tr>
      <td>
        Complete Mailing Address</td>
      <td colspan="2">
        <input name="txtRecpCompleteMailAddress" class="txtbig" id="txtRecpCompleteMailAddress" type="text" maxlength="255">

      </td>
      <td>
        <span id="RequiredFieldValidator25"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>

      </td>
    </tr>
    <tr>
      <td>
        Direct Telephone No.</td>
      <td colspan="2">
        <input name="txtRecpDirectTelNo" class="txtbig" id="txtRecpDirectTelNo" type="text" maxlength="255">

      </td>
      <td>
        <span id="RequiredFieldValidator26"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>

      </td>
    </tr>
    <tr>
      <td>
        Email Address</td>
      <td colspan="2">
        <input name="txtRecpEmailAddress" class="txtbig" id="txtRecpEmailAddress" type="text" maxlength="255">

      </td>
      <td>
        <span id="RequiredFieldValidator27"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>

      </td>
    </tr>
    <tr>
      <td>
        Intended Application</td>
      <td colspan="2">
        <input name="txtRecpIntendedApp" class="txtbig" id="txtRecpIntendedApp" type="text" maxlength="255">

      </td>
      <td>
        <span id="RequiredFieldValidator28"><img tabindex="-1" alt="Error Icon" src="../images/errorIcon.png"></span>

      </td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案4】：

我也同意使用引导程序可能是要走的路。这是一个通用示例。

http://codepen.io/anon/pen/EKjzoV

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
</form>

【讨论】：