右对齐输入表

Question

我尝试将文本输入对齐到表td的右边但没有结果。这就是我所拥有的：

＆＃13;

＆＃13;

.right {
  text-align: right;
}

＆＃13;

<table width="100%">
  <tr>
    <td width="50%"><input type="text" name="nome" id="nome" placeholder="Nome" /></td>
    <td class="right"><input type="text" name="email" id="email" placeholder="Email" /></td>
  </tr>
  <tr>
    <td colspan="2"><input type="text" name="msg" id="msg" placeholder="Mensagem" /></td>
  </tr>
  <tr>
    <td colspan="2">
      <input type="submit" id="sendform" value="Enviar">
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

<input>内的第二个<td> 右对齐 但<input>也恰好与<td>一样宽。

运行此选项可以查看强制<td>更宽一点，<input>稍窄一些后会发生什么。 （我还添加了边框以使效果更加明显）

td {
  border: 1px solid black;
  width: 100px;
}

input[type="text"] {
  width: 60px;
}

.right {
  text-align: right;
}

<table>
  <tr>
    <td width="50%"><input type="text" name="nome" id="nome" placeholder="Nome" /></td>
    <td class="right"><input type="text" name="email" id="email" placeholder="Email" /></td>
  </tr>
  <tr>
    <td colspan="2"><input type="text" name="msg" id="msg" placeholder="Mensagem" /></td>
  </tr>
  <tr>
    <td colspan="2">
      <input type="submit" id="sendform" value="Enviar">
    </td>
  </tr>
</table>