css 如何将这三个按钮分开

0s7z1bwu  于 12个月前  发布在  其他
关注(0)|答案(5)|浏览(111)

使用电子邮件签名生成器来做到这一点，它包括1个按钮，但我需要添加2个。但我希望按钮是相同的宽度，然后均匀分布在整个签名的宽度。

<table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
  <tbody>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
          <tbody>
            <tr>
              <td width="150" style="vertical-align: middle;"><span class="template3__ImageContainer-sc-vj949k-0 jeScQV" style="margin-right: 20px; display: block;"><img src="https://storage.googleapis.com/msgsndr/4v9YnFV91CVUbuwS6IF5/media/64f8b3af63e5711da26d77bf.png" role="presentation" width="130" class="image__StyledImage-sc-hupvqm-0 gYgOut" style="max-width: 130px;"></span></td>
              <td style="vertical-align: middle;">
                <h2 color="#000" class="name__NameContainer-sc-1m457h3-0 jxbGUj" style="margin: 0px; font-size: 18px; color: rgb(0, 0, 0); font-weight: 600;"><span>Aaron</span><span>&nbsp;</span><span>Rajchel</span></h2>
                <p color="#000" font-size="medium" class="job-title__Container-sc-1hmtp73-0 ifJNJc" style="margin: 0px; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;"><span>Owner</span></p>
                <p color="#000" font-size="medium" class="company-details__CompanyContainer-sc-j5pyy8-0 VnOLK" style="margin: 0px; font-weight: 500; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;"><span>LandscapAI</span></p>
                <p color="#000" font-size="medium" class="custom-field__CustomFieldContainer-sc-190n2f-0 dKSugh" style="color: rgb(0, 0, 0); margin: 0px; font-size: 14px; line-height: 22px;"><span>Automation + AI = Grow</span></p>
              </td>
              <td width="30">
                <div style="width: 30px;"></div>
              </td>
              <td color="#4358a7" direction="vertical" width="1" height="auto" class="color-divider__Divider-sc-1h38qjv-0 llIisW" style="width: 1px; border-bottom: none; border-left: 1px solid rgb(67, 88, 167);"></td>
              <td width="30">
                <div style="width: 30px;"></div>
              </td>
              <td style="vertical-align: middle;">
                <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                  <tbody>
                    <tr height="25" style="vertical-align: middle;">
                      <td width="30" style="vertical-align: middle;">
                        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                          <tbody>
                            <tr>
                              <td style="vertical-align: bottom;"><span color="#4358a7" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe" style="display: inline-block; background-color: rgb(67, 88, 167);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" color="#4358a7" alt="mobilePhone" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri" style="display: block; background-color: rgb(67, 88, 167);"></span></td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                      <td style="padding: 0px; color: rgb(0, 0, 0);"><a href="tel:855-242-4769" color="#000" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>855-242-4769</span></a></td>
                    </tr>
                    <tr height="25" style="vertical-align: middle;">
                      <td width="30" style="vertical-align: middle;">
                        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                          <tbody>
                            <tr>
                              <td style="vertical-align: bottom;"><span color="#4358a7" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe" style="display: inline-block; background-color: rgb(67, 88, 167);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png" color="#4358a7" alt="emailAddress" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri" style="display: block; background-color: rgb(67, 88, 167);"></span></td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                      <td style="padding: 0px;"><a href="mailto:[email protected]" color="#000" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>[email protected]</span></a></td>
                    </tr>
                    <tr height="25" style="vertical-align: middle;">
                      <td width="30" style="vertical-align: middle;">
                        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                          <tbody>
                            <tr>
                              <td style="vertical-align: bottom;"><span color="#4358a7" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe" style="display: inline-block; background-color: rgb(67, 88, 167);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png" color="#4358a7" alt="website" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri" style="display: block; background-color: rgb(67, 88, 167);"></span></td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                      <td style="padding: 0px;"><a href="//www.landscap.ai" color="#000" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>www.landscap.ai</span></a></td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
          <tbody>
            <tr>
              <td height="30"></td>
            </tr>
            <tr>
              <td color="#4358a7" direction="horizontal" width="auto" height="1" class="color-divider__Divider-sc-1h38qjv-0 llIisW" style="width: 100%; border-bottom: 1px solid rgb(67, 88, 167); border-left: none; display: block;"></td>
            </tr>
            <tr>
              <td height="30"></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
          <tbody>
            <tr>
              <td style="text-align: right; vertical-align: top;"></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
          <tbody>
            <tr>
              <td></td>
              <td>
                <tr><span style="display: block;">
    <a target="_blank" rel="noopener noreferrer" href="https://updates.landscap.ai/widget/bookings/demolandscapai" color="#4358a7" class="cta__CtaButton-sc-sq0d6i-0 kGNEzu" style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: inline-block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px;">Customer Demo</a>
    <a target="_blank" rel="noopener noreferrer" href="https://updates.landscap.ai/widget/bookings/customersupportmeet" color="#4358a7" class="cta__CtaButton-sc-sq0d6i-0 kGNEzu" style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: inline-block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px;">Customer Support</a>
    <a target="_blank" rel="noopener noreferrer" href="https://updates.landscap.ai/widget/bookings/affiliatedemo" color="#4358a7" class="cta__CtaButton-sc-sq0d6i-0 kGNEzu" style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: inline-block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px;">Affiliate Demo</a>
</span></tr>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

自从我用HTML编码以来已经有20年了，但我到处乱转，无法让它工作。非常感谢！

css

5条答案

按热度按时间
g9icjywg

g9icjywg1#

使用style=“text-align将按钮居中：中心;"，并且它们在整个签名的宽度内均匀间隔。这应该会给你给予三个均匀间隔的按钮，在签名下具有相同的宽度。您可以根据需要调整按钮文本和链接。
完整的重构代码：

<table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI"
    style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
    <tbody>
        <tr>
            <td>
                <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI"
                    style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                    <tbody>
                        <tr>
                            <td width="150" style="vertical-align: middle;"><span
                                    class="template3__ImageContainer-sc-vj949k-0 jeScQV"
                                    style="margin-right: 20px; display: block;"><img
                                        src="https://storage.googleapis.com/msgsndr/4v9YnFV91CVUbuwS6IF5/media/64f8b3af63e5711da26d77bf.png"
                                        role="presentation" width="130" class="image__StyledImage-sc-hupvqm-0 gYgOut"
                                        style="max-width: 130px;"></span></td>
                            <td style="vertical-align: middle;">
                                <h2 color="#000" class="name__NameContainer-sc-1m457h3-0 jxbGUj"
                                    style="margin: 0px; font-size: 18px; color: rgb(0, 0, 0); font-weight: 600;">
                                    <span>Aaron</span><span>&nbsp;</span><span>Rajchel</span>
                                </h2>
                                <p color="#000" font-size="medium" class="job-title__Container-sc-1hmtp73-0 ifJNJc"
                                    style="margin: 0px; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;">
                                    <span>Owner</span>
                                </p>
                                <p color="#000" font-size="medium"
                                    class="company-details__CompanyContainer-sc-j5pyy8-0 VnOLK"
                                    style="margin: 0px; font-weight: 500; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;">
                                    <span>LandscapAI</span>
                                </p>
                                <p color="#000" font-size="medium"
                                    class="custom-field__CustomFieldContainer-sc-190n2f-0 dKSugh"
                                    style="color: rgb(0, 0, 0); margin: 0px; font-size: 14px; line-height: 22px;">
                                    <span>Automation + AI = Grow</span>
                                </p>
                            </td>
                            <td width="30">
                                <div style="width: 30px;"></div>
                            </td>
                            <td color="#4358a7" direction="vertical" width="1" height="auto"
                                class="color-divider__Divider-sc-1h38qjv-0 llIisW"
                                style="width: 1px; border-bottom: none; border-left: 1px solid rgb(67, 88, 167);"></td>
                            <td width="30">
                                <div style="width: 30px;"></div>
                            </td>
                            <td style="vertical-align: middle;">
                                <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI"
                                    style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                                    <tbody>
                                        <tr height="25" style="vertical-align: middle;">
                                            <td width="30" style="vertical-align: middle;">
                                                <table cellpadding="0" cellspacing="0"
                                                    class="table__StyledTable-sc-1avdl6r-0 kAbRZI"
                                                    style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                                                    <tbody>
                                                        <tr>
                                                            <td style="vertical-align: bottom;"><span color="#4358a7"
                                                                    width="11"
                                                                    class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe"
                                                                    style="display: inline-block; background-color: rgb(67, 88, 167);"><img
                                                                        src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png"
                                                                        color="#4358a7" alt="mobilePhone" width="13"
                                                                        class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri"
                                                                        style="display: block; background-color: rgb(67, 88, 167);"></span>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                            <td style="padding: 0px; color: rgb(0, 0, 0);"><a href="tel:855-242-4769"
                                                    color="#000" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU"
                                                    style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>855-242-4769</span></a>
                                            </td>
                                        </tr>
                                        <tr height="25" style="vertical-align: middle;">
                                            <td width="30" style="vertical-align: middle;">
                                                <table cellpadding="0" cellspacing="0"
                                                    class="table__StyledTable-sc-1avdl6r-0 kAbRZI"
                                                    style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                                                    <tbody>
                                                        <tr>
                                                            <td style="vertical-align: bottom;"><span color="#4358a7"
                                                                    width="11"
                                                                    class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe"
                                                                    style="display: inline-block; background-color: rgb(67, 88, 167);"><img
                                                                        src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png"
                                                                        color="#4358a7" alt="emailAddress" width="13"
                                                                        class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri"
                                                                        style="display: block; background-color: rgb(67, 88, 167);"></span>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                            <td style="padding: 0px;"><a href="mailto:[email protected]" color="#000"
                                                    class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU"
                                                    style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>[email protected]</span></a>
                                            </td>
                                        </tr>
                                        <tr height="25" style="vertical-align: middle;">
                                            <td width="30" style="vertical-align: middle;">
                                                <table cellpadding="0" cellspacing="0"
                                                    class="table__StyledTable-sc-1avdl6r-0 kAbRZI"
                                                    style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                                                    <tbody>
                                                        <tr>
                                                            <td style="vertical-align: bottom;"><span color="#4358a7"
                                                                    width="11"
                                                                    class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe"
                                                                    style="display: inline-block; background-color: rgb(67, 88, 167);"><img
                                                                        src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png"
                                                                        color="#4358a7" alt="website" width="13"
                                                                        class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri"
                                                                        style="display: block; background-color: rgb(67, 88, 167);"></span>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                            <td style="padding: 0px;"><a href="//www.landscap.ai" color="#000"
                                                    class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU"
                                                    style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>www.landscap.ai</span></a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI"
                    style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                    <tbody>
                        <tr>
                            <td height="30"></td>
                        </tr>
                        <tr>
                            <td color="#4358a7" direction="horizontal" width="auto" height="1"
                                class="color-divider__Divider-sc-1h38qjv-0 llIisW"
                                style="width: 100%; border-bottom: 1px solid rgb(67, 88, 167); border-left: none; display: block;">
                            </td>
                        </tr>
                        <tr>
                            <td height="30"></td>
                        </tr>
                        <!-- Add a row for the buttons here -->
                        <tr>
                            <td style="text-align: center; vertical-align: top;">
                                <a target="_blank" rel="noopener noreferrer"
                                    href="https://updates.landscap.ai/widget/bookings/demolandscapai" color="#4358a7"
                                    class="cta__CtaButton-sc-sq0d6i-0 kGNEzu"
                                    style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: inline-block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px; width: 120px;">Customer
                                    Demo</a>
                                <a target="_blank" rel="noopener noreferrer"
                                    href="https://updates.landscap.ai/widget/bookings/customersupportmeet"
                                    color="#4358a7" class="cta__CtaButton-sc-sq0d6i-0 kGNEzu"
                                    style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: inline-block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px; width: 120px;">Customer
                                    Support</a>
                                <a target="_blank" rel="noopener noreferrer"
                                    href="https://updates.landscap.ai/widget/bookings/affiliatedemo" color="#4358a7"
                                    class="cta__CtaButton-sc-sq0d6i-0 kGNEzu"
                                    style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: inline-block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px; width: 120px;">Affiliate
                                    Demo</a>
                            </td>
                        </tr>
                        <!-- End of buttons row -->
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

下面是代码的一部分：

<!-- Add a row for the buttons here -->
                  <tr>
                     <td style="text-align: center; vertical-align: top;">
                        <a target="_blank" rel="noopener noreferrer" href="https://updates.landscap.ai/widget/bookings/demolandscapai" color="#4358a7" class="cta__CtaButton-sc-sq0d6i-0 kGNEzu" style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: inline-block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px; width: 100px;">Customer Demo</a>
                        <a target="_blank" rel="noopener noreferrer" href="https://updates.landscap.ai/widget/bookings/customersupportmeet" color="#4358a7" class="cta__CtaButton-sc-sq0d6i-0 kGNEzu" style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: inline-block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px; width: 100px;">Support</a>
                        <a target="_blank" rel="noopener noreferrer" href="https://updates.landscap.ai/widget/bookings/affiliatedemo" color="#4358a7" class="cta__CtaButton-sc-sq0d6i-0 kGNEzu" style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: inline-block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px; width: 100px;">Affiliate Demo</a>
                     </td>
                  </tr>
                  <!-- End of buttons row -->
赞(0）分享  回复(0）举报  12个月前
nbysray5

nbysray52#

table布局不再像20年前那样流行。你可以用flexbox来实现：

div.flex-container > a {
  flex-basis: 120px
}
<table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
  <tbody>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
          <tbody>
            <tr>
              <td width="150" style="vertical-align: middle;"><span class="template3__ImageContainer-sc-vj949k-0 jeScQV" style="margin-right: 20px; display: block;"><img src="https://storage.googleapis.com/msgsndr/4v9YnFV91CVUbuwS6IF5/media/64f8b3af63e5711da26d77bf.png" role="presentation" width="130" class="image__StyledImage-sc-hupvqm-0 gYgOut" style="max-width: 130px;"></span></td>
              <td style="vertical-align: middle;">
                <h2 color="#000" class="name__NameContainer-sc-1m457h3-0 jxbGUj" style="margin: 0px; font-size: 18px; color: rgb(0, 0, 0); font-weight: 600;"><span>Aaron</span><span>&nbsp;</span><span>Rajchel</span></h2>
                <p color="#000" font-size="medium" class="job-title__Container-sc-1hmtp73-0 ifJNJc" style="margin: 0px; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;"><span>Owner</span></p>
                <p color="#000" font-size="medium" class="company-details__CompanyContainer-sc-j5pyy8-0 VnOLK" style="margin: 0px; font-weight: 500; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;"><span>LandscapAI</span></p>
                <p color="#000" font-size="medium" class="custom-field__CustomFieldContainer-sc-190n2f-0 dKSugh" style="color: rgb(0, 0, 0); margin: 0px; font-size: 14px; line-height: 22px;"><span>Automation + AI = Grow</span></p>
              </td>
              <td width="30">
                <div style="width: 30px;"></div>
              </td>
              <td color="#4358a7" direction="vertical" width="1" height="auto" class="color-divider__Divider-sc-1h38qjv-0 llIisW" style="width: 1px; border-bottom: none; border-left: 1px solid rgb(67, 88, 167);"></td>
              <td width="30">
                <div style="width: 30px;"></div>
              </td>
              <td style="vertical-align: middle;">
                <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                  <tbody>
                    <tr height="25" style="vertical-align: middle;">
                      <td width="30" style="vertical-align: middle;">
                        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                          <tbody>
                            <tr>
                              <td style="vertical-align: bottom;"><span color="#4358a7" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe" style="display: inline-block; background-color: rgb(67, 88, 167);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" color="#4358a7" alt="mobilePhone" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri" style="display: block; background-color: rgb(67, 88, 167);"></span></td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                      <td style="padding: 0px; color: rgb(0, 0, 0);"><a href="tel:855-242-4769" color="#000" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>855-242-4769</span></a></td>
                    </tr>
                    <tr height="25" style="vertical-align: middle;">
                      <td width="30" style="vertical-align: middle;">
                        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                          <tbody>
                            <tr>
                              <td style="vertical-align: bottom;"><span color="#4358a7" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe" style="display: inline-block; background-color: rgb(67, 88, 167);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png" color="#4358a7" alt="emailAddress" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri" style="display: block; background-color: rgb(67, 88, 167);"></span></td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                      <td style="padding: 0px;"><a href="mailto:[email protected]" color="#000" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>[email protected]</span></a></td>
                    </tr>
                    <tr height="25" style="vertical-align: middle;">
                      <td width="30" style="vertical-align: middle;">
                        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                          <tbody>
                            <tr>
                              <td style="vertical-align: bottom;"><span color="#4358a7" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe" style="display: inline-block; background-color: rgb(67, 88, 167);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png" color="#4358a7" alt="website" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri" style="display: block; background-color: rgb(67, 88, 167);"></span></td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                      <td style="padding: 0px;"><a href="//www.landscap.ai" color="#000" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>www.landscap.ai</span></a></td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
          <tbody>
            <tr>
              <td height="30"></td>
            </tr>
            <tr>
              <td color="#4358a7" direction="horizontal" width="auto" height="1" class="color-divider__Divider-sc-1h38qjv-0 llIisW" style="width: 100%; border-bottom: 1px solid rgb(67, 88, 167); border-left: none; display: block;"></td>
            </tr>
            <tr>
              <td height="30"></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
          <tbody>
            <tr>
              <td style="text-align: right; vertical-align: top;"></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
          <tbody>
            <tr>
              <td></td>
              <td>
                <tr><div class="flex-container" style="display: flex;justify-content: space-evenly">
    <a target="_blank" rel="noopener noreferrer" href="https://updates.landscap.ai/widget/bookings/demolandscapai" color="#4358a7" class="cta__CtaButton-sc-sq0d6i-0 kGNEzu" style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: inline-block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px;">Customer Demo</a>
    <a target="_blank" rel="noopener noreferrer" href="https://updates.landscap.ai/widget/bookings/customersupportmeet" color="#4358a7" class="cta__CtaButton-sc-sq0d6i-0 kGNEzu" style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: inline-block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px;">Customer Support</a>
    <a target="_blank" rel="noopener noreferrer" href="https://updates.landscap.ai/widget/bookings/affiliatedemo" color="#4358a7" class="cta__CtaButton-sc-sq0d6i-0 kGNEzu" style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: inline-block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px;">Affiliate Demo</a>
</div></tr>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

你可以在上面看到，我在链接周围的span标签中添加了这个样式：

<div style="display: flex;justify-content: space-evenly">

还将span更改为div，并删除了显示块，因为div基本上是span的块版本。
要使它们具有相同的宽度，最简单的方法是使用（而不是内联）css。您可以使用flex basis并将容器中的所有元素作为目标（参见上文）。

赞(0）分享  回复(0）举报  12个月前
mbskvtky

mbskvtky3#

问题是，锚点都在一个单元格（td）中。
为了解决这个问题，你必须把它们放在同一个表格行的不同单元格中（tr）。
然后，您可以使用align属性来对齐单元格左侧，中心和右侧的锚点：

<table>
  <tr>
    <td align="left"><a href="#">Button 1</a></td>
    <td align="center"><a href="#">Button 1</a></td>
    <td align="right"><a href="#">Button 1</a></td>
  </tr>
</table>
<table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
  <tbody>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
          <tbody>
            <tr>
              <td width="150" style="vertical-align: middle;"><span class="template3__ImageContainer-sc-vj949k-0 jeScQV" style="margin-right: 20px; display: block;"><img src="https://storage.googleapis.com/msgsndr/4v9YnFV91CVUbuwS6IF5/media/64f8b3af63e5711da26d77bf.png" role="presentation" width="130" class="image__StyledImage-sc-hupvqm-0 gYgOut" style="max-width: 130px;"></span></td>
              <td style="vertical-align: middle;">
                <h2 color="#000" class="name__NameContainer-sc-1m457h3-0 jxbGUj" style="margin: 0px; font-size: 18px; color: rgb(0, 0, 0); font-weight: 600;"><span>Aaron</span><span>&nbsp;</span><span>Rajchel</span></h2>
                <p color="#000" font-size="medium" class="job-title__Container-sc-1hmtp73-0 ifJNJc" style="margin: 0px; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;"><span>Owner</span></p>
                <p color="#000" font-size="medium" class="company-details__CompanyContainer-sc-j5pyy8-0 VnOLK" style="margin: 0px; font-weight: 500; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;"><span>LandscapAI</span></p>
                <p color="#000" font-size="medium" class="custom-field__CustomFieldContainer-sc-190n2f-0 dKSugh" style="color: rgb(0, 0, 0); margin: 0px; font-size: 14px; line-height: 22px;"><span>Automation + AI = Grow</span></p>
              </td>
              <td width="30">
                <div style="width: 30px;"></div>
              </td>
              <td color="#4358a7" direction="vertical" width="1" height="auto" class="color-divider__Divider-sc-1h38qjv-0 llIisW" style="width: 1px; border-bottom: none; border-left: 1px solid rgb(67, 88, 167);"></td>
              <td width="30">
                <div style="width: 30px;"></div>
              </td>
              <td style="vertical-align: middle;">
                <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                  <tbody>
                    <tr height="25" style="vertical-align: middle;">
                      <td width="30" style="vertical-align: middle;">
                        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                          <tbody>
                            <tr>
                              <td style="vertical-align: bottom;"><span color="#4358a7" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe" style="display: inline-block; background-color: rgb(67, 88, 167);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" color="#4358a7" alt="mobilePhone" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri" style="display: block; background-color: rgb(67, 88, 167);"></span></td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                      <td style="padding: 0px; color: rgb(0, 0, 0);"><a href="tel:855-242-4769" color="#000" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>855-242-4769</span></a></td>
                    </tr>
                    <tr height="25" style="vertical-align: middle;">
                      <td width="30" style="vertical-align: middle;">
                        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                          <tbody>
                            <tr>
                              <td style="vertical-align: bottom;"><span color="#4358a7" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe" style="display: inline-block; background-color: rgb(67, 88, 167);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png" color="#4358a7" alt="emailAddress" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri" style="display: block; background-color: rgb(67, 88, 167);"></span></td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                      <td style="padding: 0px;"><a href="mailto:[email protected]" color="#000" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>[email protected]</span></a></td>
                    </tr>
                    <tr height="25" style="vertical-align: middle;">
                      <td width="30" style="vertical-align: middle;">
                        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                          <tbody>
                            <tr>
                              <td style="vertical-align: bottom;"><span color="#4358a7" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe" style="display: inline-block; background-color: rgb(67, 88, 167);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png" color="#4358a7" alt="website" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri" style="display: block; background-color: rgb(67, 88, 167);"></span></td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                      <td style="padding: 0px;"><a href="//www.landscap.ai" color="#000" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>www.landscap.ai</span></a></td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
          <tbody>
            <tr>
              <td height="30"></td>
            </tr>
            <tr>
              <td color="#4358a7" direction="horizontal" width="auto" height="1" class="color-divider__Divider-sc-1h38qjv-0 llIisW" style="width: 100%; border-bottom: 1px solid rgb(67, 88, 167); border-left: none; display: block;"></td>
            </tr>
            <tr>
              <td height="30"></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
          <tbody>
            <tr>
              <td style="text-align: right; vertical-align: top;"></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
          <tbody>
            <tr>
              <td></td>
            </tr>
            <tr>
              <td align="left">
    <a target="_blank" rel="noopener noreferrer" href="https://updates.landscap.ai/widget/bookings/demolandscapai" color="#4358a7" class="cta__CtaButton-sc-sq0d6i-0 kGNEzu" style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: inline-block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px;">Customer Demo</a>
              </td>
              <td align="center">
    <a target="_blank" rel="noopener noreferrer" href="https://updates.landscap.ai/widget/bookings/customersupportmeet" color="#4358a7" class="cta__CtaButton-sc-sq0d6i-0 kGNEzu" style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: inline-block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px;">Customer Support</a>
              </td>
              <td align="right">
    <a target="_blank" rel="noopener noreferrer" href="https://updates.landscap.ai/widget/bookings/affiliatedemo" color="#4358a7" class="cta__CtaButton-sc-sq0d6i-0 kGNEzu" style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: inline-block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px;">Affiliate Demo</a>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
赞(0）分享  回复(0）举报  12个月前
omvjsjqw

omvjsjqw4#

<table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
  <tbody>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
          <tbody>
            <tr>
              <td width="150" style="vertical-align: middle;"><span class="template3__ImageContainer-sc-vj949k-0 jeScQV" style="margin-right: 20px; display: block;"><img src="https://storage.googleapis.com/msgsndr/4v9YnFV91CVUbuwS6IF5/media/64f8b3af63e5711da26d77bf.png" role="presentation" width="130" class="image__StyledImage-sc-hupvqm-0 gYgOut" style="max-width: 130px;"></span></td>
              <td style="vertical-align: middle;">
                <h2 color="#000" class="name__NameContainer-sc-1m457h3-0 jxbGUj" style="margin: 0px; font-size: 18px; color: rgb(0, 0, 0); font-weight: 600;"><span>Aaron</span><span>&nbsp;</span><span>Rajchel</span></h2>
                <p color="#000" font-size="medium" class="job-title__Container-sc-1hmtp73-0 ifJNJc" style="margin: 0px; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;"><span>Owner</span></p>
                <p color="#000" font-size="medium" class="company-details__CompanyContainer-sc-j5pyy8-0 VnOLK" style="margin: 0px; font-weight: 500; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;"><span>LandscapAI</span></p>
                <p color="#000" font-size="medium" class="custom-field__CustomFieldContainer-sc-190n2f-0 dKSugh" style="color: rgb(0, 0, 0); margin: 0px; font-size: 14px; line-height: 22px;"><span>Automation + AI = Grow</span></p>
              </td>
              <td width="30">
                <div style="width: 30px;"></div>
              </td>
              <td color="#4358a7" direction="vertical" width="1" height="auto" class="color-divider__Divider-sc-1h38qjv-0 llIisW" style="width: 1px; border-bottom: none; border-left: 1px solid rgb(67, 88, 167);"></td>
              <td width="30">
                <div style="width: 30px;"></div>
              </td>
              <td style="vertical-align: middle;">
                <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                  <tbody>
                    <tr height="25" style="vertical-align: middle;">
                      <td width="30" style="vertical-align: middle;">
                        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                          <tbody>
                            <tr>
                              <td style="vertical-align: bottom;"><span color="#4358a7" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe" style="display: inline-block; background-color: rgb(67, 88, 167);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" color="#4358a7" alt="mobilePhone" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri" style="display: block; background-color: rgb(67, 88, 167);"></span></td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                      <td style="padding: 0px; color: rgb(0, 0, 0);"><a href="tel:855-242-4769" color="#000" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>855-242-4769</span></a></td>
                    </tr>
                    <tr height="25" style="vertical-align: middle;">
                      <td width="30" style="vertical-align: middle;">
                        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                          <tbody>
                            <tr>
                              <td style="vertical-align: bottom;"><span color="#4358a7" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe" style="display: inline-block; background-color: rgb(67, 88, 167);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png" color="#4358a7" alt="emailAddress" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri" style="display: block; background-color: rgb(67, 88, 167);"></span></td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                      <td style="padding: 0px;"><a href="mailto:[email protected]" color="#000" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>[email protected]</span></a></td>
                    </tr>
                    <tr height="25" style="vertical-align: middle;">
                      <td width="30" style="vertical-align: middle;">
                        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
                          <tbody>
                            <tr>
                              <td style="vertical-align: bottom;"><span color="#4358a7" width="11" class="contact-info__IconWrapper-sc-mmkjr6-1 bglVXe" style="display: inline-block; background-color: rgb(67, 88, 167);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png" color="#4358a7" alt="website" width="13" class="contact-info__ContactLabelIcon-sc-mmkjr6-0 cnkwri" style="display: block; background-color: rgb(67, 88, 167);"></span></td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                      <td style="padding: 0px;"><a href="//www.landscap.ai" color="#000" class="contact-info__ExternalLink-sc-mmkjr6-2 ibLXSU" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 12px;"><span>www.landscap.ai</span></a></td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
          <tbody>
            <tr>
              <td height="30"></td>
            </tr>
            <tr>
              <td color="#4358a7" direction="horizontal" width="auto" height="1" class="color-divider__Divider-sc-1h38qjv-0 llIisW" style="width: 100%; border-bottom: 1px solid rgb(67, 88, 167); border-left: none; display: block;"></td>
            </tr>
            <tr>
              <td height="30"></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
          <tbody>
            <tr>
              <td style="text-align: right; vertical-align: top;"></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table cellpadding="0" cellspacing="0" class="table__StyledTable-sc-1avdl6r-0 kAbRZI" style="width: 100%; vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;">
          <tbody>
            <tr>
              <td></td>
              <td>
                <tr><span style="display: flex;
    justify-content: space-evenly;">
    <a target="_blank" rel="noopener noreferrer" href="https://updates.landscap.ai/widget/bookings/demolandscapai" color="#4358a7" class="cta__CtaButton-sc-sq0d6i-0 kGNEzu" style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: inline-block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px;">Customer Demo</a>
    <a target="_blank" rel="noopener noreferrer" href="https://updates.landscap.ai/widget/bookings/customersupportmeet" color="#4358a7" class="cta__CtaButton-sc-sq0d6i-0 kGNEzu" style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: inline-block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px;">Customer Support</a>
    <a target="_blank" rel="noopener noreferrer" href="https://updates.landscap.ai/widget/bookings/affiliatedemo" color="#4358a7" class="cta__CtaButton-sc-sq0d6i-0 kGNEzu" style="border-width: 6px 12px; border-style: solid; border-color: rgb(67, 88, 167); display: inline-block; background-color: rgb(67, 88, 167); color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 40px; font-size: 12px; border-radius: 3px;">Affiliate Demo</a>
</span></tr>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

我已经在下面的一行中的按钮包含的变化。

<span style="display: flex;justify-content: space-evenly;">
赞(0）分享  回复(0）举报  12个月前
rsl1atfo

rsl1atfo5#

您可以按如下方式调整某些内联样式：

  • 对于按钮周围的span标记（a标记），使用以下样式：display: flex; justify-content: space-between; margin: 0 -5px;。在此样式中，-5px是按钮之间间距的偏移量。您可以根据需要进行调整。
  • 对于按钮（a标记），添加以下样式：flex: 1; margin: 0 5px;，其中5px是按钮之间的间距。您可以自定义此值以匹配上面的span标记的样式。
  • 您可以通过复制一个按钮并修改文本来添加任意多个按钮，只要有足够的空间来显示它们。

请注意，由于我们使用的是display: flex，旧版浏览器（例如Internet Explorer）可能无法完全支持。

赞(0）分享  回复(0）举报  12个月前
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com