如何在td中对齐元素？

Question

我在页面上附加了包含元素的图片。我想＆＃34;格式-123-456-7890）正好在phone元素下面。目前＆＃34;电话分机＆＃34;元素被包裹。如果我增加＆＃34;格式的大小..＆＃34;元素，手机ext元素被包裹。不知道解决方案。这是HTML代码。我希望Phone Ext在一行中，Format元素在一行中（不要包装）。

＆＃13;

＆＃13;

<table datatable="0" role="presentation">
  <caption class="hiddenContent">data table</caption>
  <tr>
    <td style="width: 30%;text-align: right">*First Name:</td>
    <td>
      <input type="text" name="elctnFirstName" id="elctnFirstName" value="" aria-required="true" maxlength="40" />
    </td>

  </tr>
  <tr>
    <td style="width: 20%;text-align: right">Middle Name:</td>
    <td>
      <input type="text" name="elctnMiddleName" id="elctnMiddleName" value="" aria-required="true" maxlength="40" />
    </td>
  </tr>
  <tr>
    <td style="width: 20%;text-align: right">*Last Name:</td>
    <td>
      <input type="text" name="elctnLastName" id="elctnLastName" value="" aria-required="true" maxlength="40" />
    </td>
  </tr>
  <tr>
    <td style="width: 20%;text-align: right">Email Address:</td>
    <td>
      <input type="text" name="emailAddress" id="emailAddress" value="" aria-required="true" maxlength="256" />
    </td>
  </tr>
  <tr>
    <td style="width: 20%;text-align: right">*Phone:</td>
    <td>
      <input type="text" name="elctnPhone" id="elctnPhone" value="" aria-required="true" maxlength="12" />
    </td>
    <td style="width: 20%;text-align: right">Phone Ext:</td>
    <td>
      <input type="text" name="eltcnPhoneExt" id="eltcnPhoneExt" value="" aria-required="true" maxlength="3" />
    </td>
  </tr>
  <tr>
    <td style="width: 40%;text-align: right">(Format-123-456-7890)</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

以下是一些建议

1）在 

中使用Phone Ext

2）让表格达到其自然宽度，而不是将其设置为40％和20％

3）明确设定<input>的宽度。我怀疑扩展字段需要和其他字段一样长

4）将一个nowrap放在你不想包裹的细胞上。

5）使用Bootstrap而不是表来布置表单