CSS/HTML - 如何在输入中设置内部填充？

Question

当我尝试设置填充时,它不再是中心.它移动到另一边.

如何设置文本框输入的填充以使其仍然对齐中心？

table {
  text-align: right;
}
#textfield {
  float: left;
}
.textbox { 
  font-family: Arial, Helvetica, sans-serif;
  background: rgba(255, 255, 255, 0.44); 
  color: #333; 
  border: 1px solid #A4A4A4;
  padding-left: 5px;
  line-height: 1; 
  width: 225px; 
  height: 18px;
  border-spacing: 8px;
}

<table width="450" border="1" cellspacing="3" cellpadding="3">
  <tbody>
    <tr>
      <td width="225"><label>First Name:</label></td>
      <td width="225">
        <input class="textbox" type="text" name="textfield" id="textfield">
      </td>
    </tr>
  </tbody>
</table>

Answer 1

你可以尝试添加

.textbox { 
  box-sizing: border-box;
}

table {
  text-align: right;
}
#textfield {
  float: left;
}
.textbox { 
  font-family: Arial, Helvetica, sans-serif;
  background: rgba(255, 255, 255, 0.44); 
  color: #333; 
  border: 1px solid #A4A4A4;
  padding-left: 5px;
  line-height: 1; 
  width: 225px; 
  height: 18px;
  border-spacing: 8px;
  box-sizing: border-box;
}

<table width="450" border="1" cellspacing="3" cellpadding="3">
  <tbody>
    <tr>
      <td width="225"><label>First Name:</label></td>
      <td width="225">
        <input class="textbox" type="text" name="textfield" id="textfield">
      </td>
    </tr>
  </tbody>
</table>