Question

此按钮在我测试的所有电子邮件客户端上都能正常显示，除了外观我正在努力在图标和文本之间留出空格，中间有边框。我能够使文本和图像的高度相同的唯一方法是将它们放在同一个标签中。我已经尝试过，在图像和文本之间进行尝试，并为它们设置宽度，而这些宽度并没有改变有人有更好的方法来做到这一点？目前在Outlook中，文本和图标之间没有空格。附有所需结果的图像

      <tr>
        <td width="auto" align="center">
          <table border="0" cellpadding="0" cellspacing="0" align="center">
            <tr>
              <td width="auto" align="center" width="20px" height="15px" style="color:#ffffff; text-decoration:none; font-weight: 700; font-family: Helvetica, Arial, sans-serif, 'Montserrat'; font-size: 12px; line-height: 36px; letter-spacing: .1em; vertical-align:middle; text-transform: uppercase;">
                <div  width="20px" height="15px" style="border-right: solid 1px #414141;">
                  <!--[if mso]>
                  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="www.google.com" style="height:50px; v-text-anchor:middle; width:250px;" arcsize="0%" strokecolor="#111111" fillcolor="#111111">
                  <w:anchorlock/>
                  <center style="color:#ffffff; font-family:Helvetica, Arial, sans-serif, 'Montserrat'; font-size:font-size"12px; display: table; border="0"><img src="img/right-arrow-white.png" alt="" border="0" border-right: 1px solid grey; width="17" height="11" style="display: block;"> VIEW OUR PROJECTS</center>
              </v:roundrect>
                <![endif]-->

                  <a href="www.google.com" style="display:inline-block; color:#ffffff; background-color: #111111; text-decoration:none; font-weight: 400; font-family: Helvetica, Arial, sans-serif, 'Montserrat'; font-size: 12px; line-height: 50px; letter-spacing: .1em; vertical-align:middle; height: 50px; width: 58px; mso-hide:all">
                    <img src="img/right-arrow-white.png" width="17px" height="11px" alt="go to link"/>
                  </a>
                </div>
              </td>
              <td width="auto" align="center" style="color:#ffffff; text-decoration:none; font-weight: 400; font-family: Helvetica, Arial, sans-serif, 'Montserrat'; font-size: 12px; line-height: 15px; letter-spacing: .1em; vertical-align:middle; text-transform: uppercase; ">
                <div>
                  <a href="www.google.com" style="display:inline-block; color:#ffffff; background-color: #111111; text-decoration:none; font-weight: 400; font-family: Helvetica, Arial, sans-serif, 'Montserrat'; font-size: 12px; line-height: 50px; letter-spacing: .1em; vertical-align:middle; height: 50px; width: 200px; white-space: nowrap;
                  mso-hide:all;">
                  View our projects
                </a>
              </div>
            </td>
          </tr>
        </table>
      </td>
    </tr>

Answer 1

              <tr>
                <td width="auto" align="center">
                  <table border="0" cellpadding="0" cellspacing="0" align="center">
                    <tr>
                      <td width="auto" align="center" width="20px" height="15px" style="color:#ffffff; text-decoration:none; font-weight: 700; font-family: Helvetica, Arial, sans-serif, 'Montserrat'; font-size: 12px; line-height: 36px; letter-spacing: .1em; vertical-align:middle; text-transform: uppercase;">
                        <div>
                          <!--[if mso]>
                          <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="www.google.com.au" style="height:50px; v-text-anchor:middle; width:50px;" arcsize="0%" strokecolor="#111111" fillcolor="#111111">
                          <w:anchorlock/>
                          <center style="color:#ffffff; font-family:Helvetica, Arial, sans-serif, 'Montserrat'; font-size:font-size"12px; vertical-align: middle;"><img src="img/right-arrow-white.png" alt="arrow icon" border-right: 1px solid grey; width="17" height="11" style="display: block;"></center>
                          </v:roundrect>
                          <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="www.google.com.au" style="height:50px; v-text-anchor:middle; width:200px;" arcsize="0%" strokecolor="#111111" fillcolor="#111111">
                      <w:anchorlock/>
                      <center style="color:#ffffff; font-family:Helvetica, Arial, sans-serif, 'Montserrat'; font-size:font-size"12px;>VIEW OUR PROJECTS</center>
                      </v:roundrect>
                        <![endif]-->

                          <a href="www.google.com" style="display:inline-block; color:#ffffff; background-color: #111111; text-decoration:none; font-weight: 400; font-family: Helvetica, Arial, sans-serif, 'Montserrat'; font-size: 12px; line-height: 50px; letter-spacing: .1em; vertical-align:middle; height: 50px; width: 58px; mso-hide:all">
                            <img src="img/right-arrow-white.png" width="17px" height="11px" alt="go to link"/>
                          </a>
                        </div>
                      </td>
                      <td width="auto" align="center" style="color:#ffffff; text-decoration:none; font-weight: 400; font-family: Helvetica, Arial, sans-serif, 'Montserrat'; font-size: 12px; line-height: 15px; letter-spacing: .1em; vertical-align:middle; text-transform: uppercase; ">
                        <div>
                          <a href="www.google.com" style="display:inline-block; color:#f8f8f8; background-color: #111111; text-decoration:none; font-weight: 400; font-family: Helvetica, Arial, sans-serif, 'Montserrat'; font-size: 12px; line-height: 50px; letter-spacing: .1em; vertical-align:middle; height: 50px; width: 200px; white-space: nowrap;
                          mso-hide:all;">
                          View our projects
                        </a>
                      </div>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>

如何在按钮中的图标和文本之间创建空格和边框？ HTML电子邮件，outlook

1 个答案: