如何在 HTML 中对齐文本按钮

Question

我正在尝试水平对齐 3 个文本框，希望得到一些建议/帮助！

这些都应该排成一排，但它是以水平方式堆叠的。

我相信这与 td 和 table 标签有关。

 <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="center">
     <tbody>

     <td align="left" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px">
       <a href="" style="color:#ffffff; text-decoration:none">
       <table width="150" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">
       <tbody>

 <td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Repayment Calculator</td>



          <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="center">


     <td align="middle" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px">
       <a href="" style="color:#ffffff; text-decoration:none">
       <table width="150" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">



 <td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Borrowing Power Calculator</td>




             <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="center">
     <tbody>

     <td align="right" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px">
       <a href="" style="color:#ffffff; text-decoration:none">
       <table width="150" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">
       <tbody>


 <td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Property Report</td>
    </tr>
     </tbody>
   </table>
   </td>
    </tr>
  </tbody>
   </table></td>

Answer 1

<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="center">
     <tbody>
 <td align="left" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px; width:33%;">
       <a href="" style="color:#ffffff; text-decoration:none">
       <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">
       <tbody>
<tr>
 <td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Repayment Calculator</td>
</tr>
</tbody></table>
</td>
<td align="left" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px; width:33%;">
          <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="center">
<tbody>

<tr>

     <td align="middle" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px">
       <a href="" style="color:#ffffff; text-decoration:none">
       <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">
<tbody>

<tr>
 <td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Borrowing Power Calculator</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
<td style="width:33%;">


             <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="center">
     <tbody><tr>

     <td align="right" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px">
       <a href="" style="color:#ffffff; text-decoration:none">
       <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">
       <tbody>
<tr>
 <td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Property Report</td>
 </tr>
 </tbody></table>
</td>
</tr>
 </tbody></table>
 </td>
    </tr>
     </tbody>
   </table>