html - 右对齐菜单栏中的文本

Question

我正在为电子邮件编写菜单栏 - 因此表格很乱。我需要在表格右侧对齐两个菜单选项“点”和“我的个人资料”:

<table class="organicweb1" style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="100%;">
  <tbody>
    <tr>
      <td style="padding:10px 0px 10px 0px" align="center" valign="top">
        <table style="border-collapse:collapse; border: 1px solid red;" cellspacing="0" cellpadding="0" border="0" align="center" width="600">
          <tbody>
            <tr>
              <td align="left" width="35" valign="top">&nbsp;</td>
              <td align="center" width="590" valign="middle">
                <table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="590">
                  <tbody>
                    <tr>
                      <td style="padding:7px 0px 7px 0px" align="center" valign="middle">
                        <table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="left">
                          <tbody>
                            <tr>
                              <td style="font-family:Tahoma,Geneva,sans-serif;font-size:14px;line-height:120%;color:#512DA8" align="center" valign="top">
                                <a href="http://example.com" style="color:#004b60;text-decoration:none" target="_blank">Book</a>
                                <span>&nbsp;&nbsp;</span>
                                <a href="http://example.com" style="color:#004b60;text-decoration:none" target="_blank">Gift</a>
                                <span>&nbsp;&nbsp;</span>
                                <a href="http://example.com" style="color:#004b60;text-decoration:none" target="_blank">Voucher</a>
                                <span>&nbsp;</span>
                                <a href="http://example.com" style="color:#004b60;text-decoration:none" target="_blank"></a>
                                <span>&nbsp;&nbsp;</span>
                                <a href="http://example.com" style="color:#004b60;text-decoration:none; background-color: red; padding: 5px 10px 5px 10px; text-align: right;" target="_blank"><b>Point:</b></a>
                                <span>&nbsp;&nbsp;</span>
                                <a href="http://example.com" style="color:#004b60;text-decoration:none; background-color: red; padding: 5px 10px 5px 10px; text-align: right;" target="_blank"><b>My profile</b></a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
              <td align="left" width="35" valign="top">&nbsp;</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

JSFIDDLE

我试图在 a 标签、td 标签上设置一个 text-align:right;，但我无法得到右对齐的两个选项。

如果我在表格上设置文本对齐，我可以将它们正确对齐。但是所有的文本都是右对齐的。

有人知道我在这里做错了什么吗？

Answer 1

我认为这对你有用 -

我把内表放了width至 100%然后 split 你<a>标记为两个 <td>并给了他们float .

<table class="organicweb1" style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="100%;">
  <tbody>
    <tr>
      <td style="padding:10px 0px 10px 0px" align="center" valign="top">
        <table style="border-collapse:collapse; border: 1px solid red;" cellspacing="0" cellpadding="0" border="0" align="center" width="600">
          <tbody>
            <tr>
              <td align="left" width="35" valign="top">&nbsp;</td>
              <td align="center" width="590" valign="middle">
                <table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="590">
                  <tbody>
                    <tr>
                      <td style="padding:7px 0px 7px 0px" align="center" valign="middle">
                        <table style="border-collapse:collapse;width:100%" cellspacing="0" cellpadding="0" border="0" align="left" width: "100%">
                          <tr>
                            <td style="font-family:Tahoma,Geneva,sans-serif;font-size:14px;line-height:120%;color:#512DA8;float:left" align="center" valign="top">
                              <a href="http://example.com" style="color:#004b60;text-decoration:none" target="_blank">Book</a>
                              <span>&nbsp;&nbsp;</span>
                              <a href="http://example.com" style="color:#004b60;text-decoration:none" target="_blank">Gift</a>
                              <span>&nbsp;&nbsp;</span>
                              <a href="http://example.com" style="color:#004b60;text-decoration:none" target="_blank">Voucher</a>
                              <span>&nbsp;</span>
                              <a href="http://example.com" style="color:#004b60;text-decoration:none" target="_blank"></a>
                              <span>&nbsp;&nbsp;</span>

                            </td>
                            <td style="float:right">
                              <a href="http://example.com" style="color:#004b60;text-decoration:none; background-color: red; padding: 5px 10px 5px 10px; text-align: right;" target="_blank"><b>Point:</b></a>
                              <span>&nbsp;&nbsp;</span>
                              <a href="http://example.com" style="color:#004b60;text-decoration:none; background-color: red; padding: 5px 10px 5px 10px; text-align: right;" target="_blank"><b>My profile</b></a>
                            </td>
                          </tr>
                  </tbody>
                  </table>
                  </td>
                  </tr>
          </tbody>
          </table>
          </td>
          <td align="left" width="35" valign="top">&nbsp;</td>
          </tr>
  </tbody>
  </table>
  </td>
  </tr>
  </tbody>
</table>

希望对您有所帮助。