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

时间：2016-03-03 18:19:22

标签： html css

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

我现有的标记如下：

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

赞赏你的建议。

4 个答案:

答案 0 :(得分：0)

考虑使用bootstrap执行此布局！

请看这个链接：

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

答案 1 :(得分：0)

请使用以下css：

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

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

答案 2 :(得分：0)

您可以使用Display:flex并重写HTML 或重置表格元素的显示值（请参阅第二个代码段）：

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>

答案 3 :(得分：0)

我也同意使用bootstrap可能是要走的路。这是一个通用的例子。

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>
相关问题
最新问题