如何对齐 td 中的元素？答案

【问题标题】：How to align elements in td?如何对齐 td 中的元素？
【发布时间】：2019-01-26 19:20:33
【问题描述】：

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

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

【问题讨论】：

标签： html html-table

【解决方案1】：

这里有几个建议

1) 在Phone&nbsp;Ext 中使用&nbsp;

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

3) 显式设置<input>的宽度。我怀疑扩展字段需要和其他字段一样长

4) 在您不想包装的单元格上放置一个 nowrap。

5) 使用 Bootstrap 而不是表格来布局表单

【讨论】：