Inline-Liste der Tags in HTML-E-Mail

Ich versuche, eine HTML-Newsletter-Vorlage erstellen, die eine Liste der Tags an einem bestimmten Punkt in dieser E-Mail anzeigen wird. Die Anzahl der Elemente dieser Liste ist dynamisch. Anstatt eine durch Komma/Leerzeichen getrennte Liste zu verwenden, möchte ich diese Tags zum Beispiel mit einem Rahmen um die einzelnen Tags herum gestalten.Inline-Liste der Tags in HTML-E-Mail

Die Formatierung als Tabelle wird wahrscheinlich nicht funktionieren, da die Generierung einer Tabelle für jedes Tag eine Tabelle erzeugt, die zu breit ist, um in der übergeordneten Tabelle korrekt angezeigt zu werden. Auf der anderen Seite führt das Erzeugen von einem nicht zu einer Inline-Liste.

Ich dachte entweder tun es mit ihren CSS-Set zu zeigen: Inline; oder ein Set zum Anzeigen: Inline; auch:

<span class="hashtag-span">#hashtag</span> 
<span class="hashtag-span">#anotherone</span>

oder alternativ

<ul class="hashtag-list"> 
    <li>#hashtag</li> 
    <li>#anotherone</li> 
</ul>

Wahrscheinlich der schwierigste Teil: diese hat Outlook-kompatibel :(

Sie können sehen, sein, was ich möchte in meinem jsfiddle achive : http://jsfiddle.net/wo64xLnf/3/

Danke für Ihre Hilfe, Menschenmenge

Quelle

2015-05-13 phillyooo

Ihre Frage ist? –

herkömmliche HTML funktioniert nicht, müssen Sie Tabellen für E-Mail-Vorlage verwenden .. –

ich weiß über Tabellen und der Rest der E-Mail-Vorlage ist mit Tabellen eingerichtet, aber wie Sie diese Liste der Tags in einem Format inline angezeigt ? Die Liste der Tags ist unbekannt. Die E-Mails werden von einer Datenbank/Server-Seite generiert.Ich kann nicht einfach eine Tabelle mit n Elemente oder n Elemente einfügen. Meine Frage ist, wie man das HTML/CSS für diese Liste formatiert, um richtig anzuzeigen (d. H. Inline) in einer E-Mail. – phillyooo

Phillyoo, Outlook rendert keine "Anzeige" -Stilattribute. Obwohl der obige Code funktioniert, wird es in Outlook nicht ordnungsgemäß wiedergegeben.

Auschecken https://www.campaignmonitor.com/css/ - es ist eine gute Anleitung zum Entwerfen von E-Mails.

Sie sollten in der Lage sein, Ihr gewünschtes Ziel zu erreichen, indem Sie Tabellen, Zeilen und TDs verwenden. Verwenden Sie Inline-Styling und wenden Sie 'align = "left"' auf Ihre verschachtelten tds an.

Beispiel:

<table width="100%"> 
<tr> 
<td> 
<table> 
<tr> 
<td align="left" style="">#hashtag</td> 
</tr> 
</table> 
<table> 
<tr> 
<td align="left" style="">#hashtag</td> 
</tr> 
</table> 
</td> 
</tr> 
</table>

Sie auch versuchen, könnten die TD-Tags in der gleichen verschachtelten Tabelle mit und sehen, wie das für Sie arbeitet.

Beste

Quelle

2015-05-22 05:25:53

I Just eigentlich genau dieses gleiche Problem hatte. Hier ist eine feste Lösung kam ich mit:

<tr> 
    <td align="left"> 
    <table> 
     <tr> 
     <td valign="center" align="left" style="padding: 2px 2px 0 0;"> 
      <span style="padding: 2px 4px; border: 1px solid #dddddd; border-radius: 6px; -webkit-border-radius: 6px;"> 
      hashtag 
      </span> 
     </td>        
     </tr> 
    </table> 
    </td> 
</tr>

Quelle

2015-10-15 21:56:55

Dies ist keine leichte Aufgabe überhaupt und erfordert einiges an reite Code. Am besten nutzen Sie MSO bedingte Tabellen, damit es für Outlook und divs mit display funktioniert: Inline-Block für die meisten anderen Clients. Span-Tags als Objekte haben in vielen Clients eine sehr fleckige Unterstützung. Span wird am besten nur zum Formatieren von Schriftarten in HTML-E-Mails verwendet.

Siehe unten für die programmatischen HTML-Block:

<!--[if (gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]--> 
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;"> 
    <table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;"> 
     <tr> 
      <td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#hashtag</td> 
     </tr> 
    </table> 
</div> 
<!--[if (mso) | (IE)]></td></tr></table><![endif]-->

Und dies ist eine Vollversion Ihrer HTML von der Geige mit:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
</head> 

<body> 
    <!--[if (gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]--> 
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;"> 
    <table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;"> 
     <tr> 
      <td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#hashtag</td> 
     </tr> 
    </table> 
</div> 
<!--[if (mso) | (IE)]></td></tr></table><![endif]--> 
    <!--[if (gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]--> 
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;"> 
    <table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;"> 
     <tr> 
      <td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#anotherone</td> 
     </tr> 
    </table> 
</div> 
<!--[if (mso) | (IE)]></td></tr></table><![endif]--> 
    <!--[if (gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]--> 
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;"> 
    <table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;"> 
     <tr> 
      <td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#anotherAwesomeHashtag</td> 
     </tr> 
    </table> 
</div> 
<!--[if (mso) | (IE)]></td></tr></table><![endif]--> 
    <!--[if (gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]--> 
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;"> 
    <table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;"> 
     <tr> 
      <td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#thiswillgoviral</td> 
     </tr> 
    </table> 
</div> 
<!--[if (mso) | (IE)]></td></tr></table><![endif]--> 
    <!--[if (gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]--> 
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;"> 
    <table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;"> 
     <tr> 
      <td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#hashtagcraziness</td> 
     </tr> 
    </table> 
</div> 
<!--[if (mso) | (IE)]></td></tr></table><![endif]--> 
    <!--[if (gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]--> 
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;"> 
    <table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;"> 
     <tr> 
      <td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#thisRocks</td> 
     </tr> 
    </table> 
</div> 
<!--[if (mso) | (IE)]></td></tr></table><![endif]--> 
<!--[if (gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]--> 
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;"> 
    <table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;"> 
     <tr> 
      <td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#yetanotherone</td> 
     </tr> 
    </table> 
</div> 
<!--[if (mso) | (IE)]></td></tr></table><![endif]--> 
<!--[if (gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]--> 
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;"> 
    <table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;"> 
     <tr> 
      <td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#onemore</td> 
     </tr> 
    </table> 
</div> 
<!--[if (mso) | (IE)]></td></tr></table><![endif]--> 
    <!--[if (gte mso 9) | (IE)]><table align="left"><tr><td align="center" valign="top" style="padding: 0 4px 5px 0;"><![endif]--> 
<div style="display: inline-block; vertical-align: top; margin: 0 4px 5px 0;"> 
    <table bgcolor="#eaeaea" valign="top" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; background: #eaeaea;"> 
     <tr> 
      <td align="center" bgcolor="#eaeaea" style="padding: 3px 5px 3px 3px; font-size: 12px; border: #666666 1px solid;">#lastone</td> 
     </tr> 
    </table> 
</div> 
<!--[if (mso) | (IE)]></td></tr></table><![endif]--> 
</body> 
</html>

Quelle

2016-02-25 16:04:38 Gortonington

Schöne Lösung. Jetzt können alle Tags mit einem Codeblock geloopt werden. – Syfer

Inline-Liste der Tags in HTML-E-Mail

Antwort

Verwandte Themen