电子邮件 HTML：如何将 2 个按钮排列成一行，但让它们拉伸到容器的完整大小？

问题描述 投票：0回答：1

我布局了 html 字母，一切都很顺利，直到我需要在一行中放置两个不同大小的按钮并横跨内容的宽度。自己尝试解决这个问题半天，没有成功。因此，请帮助我解决这个按钮问题，但要以不破坏代码的方式解决。我是 html 电子邮件的新手

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
  xmlns:o="urn:schemas-microsoft-com:office:office" lang="ru">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="color-scheme" content="light dark" />
  <meta name="supported-color-schemes" content="light dark" />
  <title>title</title>
  <style type="text/css">
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

    table {
      border-spacing: 0;
      mso-cellspacing: 0;
      mso-padding-alt: 0;
    }

    td {
      padding: 0;
    }

    #outlook a {
      padding: 0;
    }

    a {
      text-decoration: none;
      color: #e8fbfa;
      font-size: 16px;
    }
  </style>

  <!--[if (gte mso 9)|(IE)]>
    <style type="text/css">
      table {border-collapse: collapse !important;}
    </style>
  <![endif]-->

  <!--[if (gte mso 9)|(IE)]>
  <xml>
    <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
  </xml>
  <![endif]-->
</head>

<body style="Margin:0;padding:0;min-width:100%;background-color:#FFFFFF;">

   <!--[if (gte mso 9)|(IE)]>
      <style type="text/css">
         body {background-color: #dde0e1!important;}
         body, table, td, p, a {font-family: sans-serif, Arial, Helvetica!important;}
      </style>
   <![endif]-->

   <center style="width: 100%;table-layout:fixed;background-color: #FFFFFF;padding-top: 40px;padding-bottom: 40px;">
    <div style="padding: 20px 16px 20px 16px; max-width: 600px;background-color: #F6F6F6;box-shadow: 0 0 10px rgba(0, 0, 0, .2);">

      <!--[if (gte mso 9)|(IE)]>
        <table width="600" align="center" border="0" cellspacing="0" cellpadding="0" role="presentation"
          style="color:#1C1E23;">
        <tr>
        <td>
      <![endif]-->

      <table align="center" border="0" cellspacing="0" cellpadding="0" role="presentation"
        style="color: #060B13;font-family: 'Poppins',sans-serif, Arial, Helvetica;background-color: #F6F6F6;Margin:0;padding:0;width: 100%;max-width: 600px;"
        >
          <!-- SECTION 1 -->
          <tr>
            <td style="padding: 0 25px 0 25px;" bgcolor="#E3F7FE">
              <table border="0" cellspacing="0" cellpadding="0" role="presentation" style="width: 100%; max-width: 600px;">
                <tr>
                  <td style="padding: 10px 0 0px 0;">
                    <p style="margin: 0; color: #060B13; font-weight: 400; font-size: 18px; line-height: 24px; text-align: center;">Lorem ipsum dolor sit amet</p>
                  </td>
                </tr>
                <tr>
                  <td style="padding: 0px 0 0px 0;">
                    <p style="margin: 0; color: #060B13; font-weight: 400; font-size: 18px; line-height: 24px; text-align: center;">Consequuntur veniam nostrum perferendis saepe?</p>
                  </td>
                </tr>
                <tr>
                  <td style="padding: 0px 0 30px 0;">
                    <p style="margin: 0; color: #060B13; font-weight: 400; font-size: 18px; line-height: 24px; text-align: center;">Dignissimos saepe explicabo quae asperiores!</p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <!-- END SECTION 1 -->

           <!-- SECTION 2 -->
           <tr>
            <td style="padding: 10px 20px 20px 20px; font-size: 0;" bgcolor="#E3F7FE">
              <table border="0" cellspacing="0" cellpadding="0" role="presentation">
                <tr>
                  <td>
                    <table border="0" cellspacing="0" cellpadding="0" role="presentation" style="vertical-align: top; display: inline-block;">
                      <tr>
                        <td style="padding: 0 20px 0 0;">
                          <table border="0" cellspacing="0" cellpadding="0" role="presentation">
                            <tr>
                              <td style="text-align: center; background-color: #FEC833; border-radius: 5px;">
                                <a href="#" target="_blank" style="background-color: #FEC833; font-size: 18px; font-weight: 600; color: #060B13; display: inline-block; text-decoration: none; padding: 10px 10px 10px 10px; line-height: 20px; border-radius: 5px; text-align: center;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ДЕТЕКТИВЫ&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                    <table border="0" cellspacing="0" cellpadding="0" role="presentation" style="vertical-align: top; display: inline-block;">
                      <tr>
                        <td>
                          <table border="0" cellspacing="0" cellpadding="0" role="presentation">
                            <tr>
                              <td style="text-align: center; background-color: #FEC833; border-radius: 5px;">
                                <a href="#" target="_blank" style="background-color: #FEC833; font-size: 18px; font-weight: 600; color: #060B13; display: inline-block; text-decoration: none; padding: 10px 10px 10px 10px; line-height: 20px; border-radius: 5px; text-align: center;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ЗАРУБЕЖНАЯ ЛИТЕРАТУРА&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>

                  </td>
                </tr>
              </table>
            </td>
           </tr>
           <tr>
           <!-- END SECTION 2 -->
      </table>

      <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        </table>
      <![endif]-->

    </div>
  </center>

</body>

</html>

html css html-email
1个回答
0
投票

如果您希望在电子邮件中并排放置两个元素（并且您需要将它们用于移动用户），请尝试使用表格。将一张桌子左对齐，另一张桌子右对齐。将表格设置为 49%，以便有一些回旋余地（Outlook 可能会堆叠两个 50% 的表格）。这个回旋空间适合您的情况，因为它会在每个按钮之间给您留出一点空间。

这是一个非常有力的例子。记下两个按钮表。还注意到当视口小于 600 像素时指示“按钮”类转到 100% 的样式。我希望这有帮助。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge" /><!--<![endif]-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <title>SUBJECT_HERE</title>
  <style>
    @media screen and (max-width: 600px) {
      .button{ width: 100% !important; }
    }
  </style>

</head>
<body style="background: #ffffff; height:100% !important; width:100% !important; margin:0; padding:0; ">
<table class="in-dark-bgcolor-262626" cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation" style="background:#ffffff; border-spacing:0 !important; border-collapse: collapse;">
  <tr>
    <td style="font-size:0;">&nbsp;</td>
    <td class="in-dark-bgcolor-262626" width="600" align="center" bgcolor="#ffffff">
      <table cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation" style="border-spacing:0 !important; border-collapse:collapse;">
        <tr>
          <td valign="top" align="center" style="padding: 9px 9px 9px 9px;">
            

            <!-- Button -->
            <table class="button" border="0" cellspacing="0" cellpadding="0" width="49%" align="left" role="presentation" style="margin-bottom:2%;">
              <tr>
                <td align="center" valign="middle" bgcolor="#fec833" height="40" style="border-radius:5px;">
                  <a href="/" target="_blank" style="display:block; text-decoration:none; font-family: sans-serif; font-size:15px; font-weight:bold; line-height:40px; color:#060b13;">
                    ДЕТЕКТИВЫ
                  </a>
                </td>
              </tr>
            </table>

            <!-- Button -->
            <table class="button" border="0" cellspacing="0" cellpadding="0" width="49%" align="right" role="presentation">
              <tr>
                <td align="center" valign="middle" bgcolor="#fec833" height="40" style="border-radius:5px;">
                  <a href="/" target="_blank" style="display:block; text-decoration:none; font-family: sans-serif; font-size:15px; font-weight:bold; line-height:40px; color:#060b13;">
                    ЗАРУБЕЖНАЯ ЛИТЕРАТУРА
                  </a>
                </td>
              </tr>
            </table>

          </td>
        </tr>
      </table>
    </td>
    <td style="font-size:0;">&nbsp;</td>
  </tr>
</table>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.