10

そのため、Outlookを介して送信されるHTMLメールを作成しようとしています。問題はolとulのグループ化にあるようで、修正方法がわかりません。送信ボタンを押す前にブラウザまたはOutlookでHTMLを見ると、次のようになります。

http://i.imgur.com/U3z7O.jpg

ただし、電子メールは次のように出力されます。

http://i.imgur.com/KbCjF.jpg

リストスタイルが削除されているので、間隔については心配していません。

追加情報：Outlookで送信し、GmailWebクライアントで表示します。また、見通しで見ると見栄えがします。

誰かが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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

<body style="margin: 0 auto;">

<table width="640" border="0" cellspacing="0" cellpadding="0" style="border:thin #e7e8e9 solid;">
  <tr>
    <td style="padding: 10px 25px;"><p style="text-align:right; color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px;">Problems viewing email? <a href="#" style="color: #0077c0;">View online version</a></p></td>
  </tr>
  <tr>
    <td style="background-color: #0077c0"><a style="border: none; margin: 0; padding: 0" href="#"><img style="border: none; margin: 0; padding: 0;" src="images/top-image.jpg" width="640" height="300" alt="The 2013 Health and Group Benefit Options are Here." border="0" /></a></td>
  </tr> 
  <tr>
    <td style="border-bottom:thin #e7e8e9 solid; padding: 20px 20px;">
        <h1 style="color: #0077c0; font-family:Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal; line-height: 1.5; margin: 0 0 20px">Annual Enrollment for Your 2013 Benefits Is Open</h1>
        <h2 style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal; line-height: 1.5; margin: 15px 0 10px; ">Overview</h2>
        <p style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 15px 0 10px;">The Annual Enrollment period for 2013 health and group benefits is open <span style="letter-spacing: 1px; color: #0077c0;">now through Friday, Nov. 16.</span> Log on to <a style="text-decoration: none; color: #0077c0;" href="#">Your Benefits Resources</a> to review your options and enroll. The online tools can help determine the option that best meets your and your family’s needs.</p>
    </td>
  </tr>
  <tr>
    <td style="border-bottom:thin #e7e8e9 solid; padding: 20px 0;">
        <h2 style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal; line-height: 1.5; margin: 0 0 10px 20px;">Who should enroll</h2>
        <ul style="margin: 0 45px; padding: 0; list-style-type:disc;">
            <li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0;">Anyone who wants to change their benefits coverage for 2013.</li>
            <li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0;">Anyone who wants to enroll in a Health Care or Dependent Care Flexible Spending Account for 2013.</li>
        </ul>
    </td>
  </tr>
  <tr>
    <td style="border-bottom:thin #e7e8e9 solid; padding: 20px 0;">
        <h2 style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal; line-height: 1.5; margin: 0 0 10px 20px;">If you don't enroll</h2>
        <ul style="margin: 0 45px; padding: 0; list-style-type:disc;">
            <li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0; padding: 0;">Your 2013 benefits enrollment will default to the coverage most similar to your 2012 coverage.</li>
            <li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0; padding: 0;">You won’t be signed up for Health Savings Account or Flexible Spending Account deductions. Health Savings Account and Flexible Spending Account elections do not carry over from year to year. </li>
        </ul>
    </td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td>
        <table width="640" border="0" cellspacing="0" cellpadding="0" style="background-color:#f1f1f2;">
          <tr>
            <td colspan="2" style="padding:20px 20px;"><h2 style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal; line-height: 1.5; margin:0; padding:0;">How to Enroll</h2></td>
          </tr>
          <tr>
            <td colspan="2">
              <table width="640" border="0" cellspacing="0" cellpadding="0" style="background-color: #0077c0;">
                <tr>
                  <td><img style="margin: 0; padding: 0" src="images/enroll-online.jpg" width="197" height="70" alt="Enroll online" border="0" /></td>
                  <td><a style="border: none; margin: 0; padding: 0" href="#"><img style="margin: 0; padding: 0" src="images/enroll-now-button.jpg" width="108" height="70" alt="Enroll now!" border="0" /></a></td>
                  <td><img style="margin: 0; padding: 0" src="images/enroll-by-phone.jpg" width="335" height="70" alt="Enroll by Phone" border="0" /></td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td style="border-right:thin #e7e8e9 solid; width: 270px;">
                <ol style="margin: 15px 20px 0 40px; padding: 0; width: 260px; list-style-type:decimal;">
                    <li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0;">Log on to <a style="text-decoration: none; color: #0077c0;" href="http://resources.hewitt.com/williams">Your Benefits Resources.</a> A log-on ID (your Social Security number) and password are required.</li>
                    <li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0;">Use the online tools to compare your medical options to determine the best option for you and your family, and to estimate the amount to contribute to your Health Savings Account and Health Care and/or Dependent Care Flexible Spending Accounts. </li>
                    <li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0;">Make your choices online.</li>
                    <li style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.5; margin: 10px 0;">Print your confirmation statement. You will also receive a confirmation of your enrollment at the home address on file. </li>
                </ol>
            </td>
            <td valign="top" style="width:280px; margin: 0 20px 0 20px;"><p style="color: #808285; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding: 0 20px; font-weight: normal; line-height: 1.5; margin: 15px 0;">Call the Williams Benefits Center (at Hewitt) at <span style="color: #0077c0;">866-</span> or <span style="color: #0077c0;">866-9</span> weekdays from 8am to 5pm CT.</p>  </td>
          </tr>
        </table>
    </td>
  </tr>
  <tr>
    <td style="padding: 10px 20px;"><p style="font-size: 10px; color: #939598; font-family:Arial, Helvetica, sans-serif; font-weight: normal; line-height: 1.5;">©2012 Williams Companies Inc</p></td>
  </tr>
</table>


</body>
</html>
4

4 に答える 4

50

電子メールで箇条書きを作成する最良の方法は、テーブルでそれらを模倣することです。JSFiddleはこちらをクリックしてください。

<table cellspacing="0" cellpadding="0">
    <tr><td width="20" align="center" valign="top">&bull;</td>
        <td width="200" align="left" valign="top">Text text text text text text</td>
    </tr>
    <tr><td align="center" valign="top">&bull;</td>
        <td align="left" valign="top">Really really really long and wrapping text here text here text here text here text here </td>
    </tr>
</table>

弾丸が長い折り返しテキストの上部と同じ高さになるように、必ずalignとvalign="top"を使用してください。

于 2014-02-26T21:00:54.147 に答える
0

<br />リストの前にタグを追加します。注：P、H、およびListタグは、すべての電子メールクライアントで適切にコーディングできるわけではありません。<br />段落の終わり/間隔にタグを使用します。サンプル：

<span style="font-size:14px; font-weight:bold;">Headline</span><br /><br />
my paragraph text here. <br />
<br />
<span... another headline here. 
<br /><br />
<ol>
<li> etc.

リストを作成する別の方法は、テーブルにリストを作成することです（それほど簡単ではありませんが、電子メールクライアント間の正しい間隔を保証します）。

電子メールクライアントで受け入れられるCSSルールのリストについては、キャンペーンモニターを参照してください。 ここ

于 2013-03-15T14:10:16.060 に答える
0

Microsoft Outlookコンパイラは、場合によっては、パディングと標準のCSSスタイルを無視することがあります。そうは言っても、電子メールで送信することを目的としたHTMLコードの非常に単純なコードとインラインスタイルを作成してみてください。

リストアイテムに対して次のコードを試してください。

<tr> 
  <!-- Row container for Intro/ Description -->
  <td align="left" style="font-size: 14px; font-style: normal; font-weight: 100; color: #191919; line-height: 1.8; text-align:justify; padding:0px 20px 0px 20px; font-family: sans-serif;">
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
    </ul>
  </td>
</tr>

お役に立てば幸いです。

ありがとう！

〜ニュートン

于 2019-12-26T18:38:59.083 に答える
0

タグに追加のマージンulを設定することで問題を解決します。ol

これは、Outlookがリストにマイナスのマージンを設定しているため（私は思う）、リストに追加のマージンを設定する必要があるためです。

 <!– [if gte mso 9]>
 <style>
     li {text-align:-webkit-match-parent; display:list-item;text-indent: -1em;}
     ul, ol{    margin-left: 40px !important;}
 </style>
 <![endif]–&gt;
于 2020-02-18T10:47:07.070 に答える