Elenco in linea dei tag nell'email HTML

Sto provando a creare un modello di newsletter HTML che mostrerà un elenco di tag a un certo punto in quell'email. Il numero di elementi di quella lista è dinamico. Invece di avere un elenco separato da virgola/spazio, vorrei ad esempio applicare questi tag con un bordo attorno a ciascuno dei tag, ad esempio.Elenco in linea dei tag nell'email HTML

La formattazione come tabella probabilmente non funzionerà, perché la generazione di uno per ogni tag creerà una tabella troppo ampia per essere visualizzata correttamente all'interno della tabella padre. D'altra parte, la generazione di una non comporterà una lista in linea.

Ho pensato di utilizzarlo con il set di CSS da visualizzare: inline; o un set da mostrare: inline; così:

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

o in alternativa

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

Probabilmente la parte più difficile: questo deve essere compatibile con Outlook :(

Si può vedere quello che mi piacerebbe achive nel mio jsfiddle :! http://jsfiddle.net/wo64xLnf/3/

Grazie per il vostro aiuto, folla

fonte

2015-05-13 phillyooo

La tua domanda è? –

l'html convenzionale non funziona, devi usare le tabelle per il modello di email. –

conosco le tabelle e tutto il resto del modello di email è impostato con le tabelle, ma come impostare quell'elenco di tag in un formato visualizzato in linea ? l'elenco dei tag è sconosciuto. le email vengono generate da un database/lato server.non posso semplicemente inserire una tabella con n elementi o n elementi. la mia domanda è come formattare l'html/css per quell'elenco per visualizzare correttamente (cioè in linea) in una e-mail. – phillyooo

Phillyoo, Outlook non esegue il rendering degli attributi di stile 'display'. Anche se il codice sopra funziona, non verrà visualizzato correttamente in Outlook.

Check out https://www.campaignmonitor.com/css/ - è una buona guida per la progettazione di e-mail.

Dovresti riuscire a raggiungere l'obiettivo desiderato utilizzando tabelle, righe e td. Usa lo stile in linea e applica 'align = "left"' ai tuoi td nidificati.

Esempio:

<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>

Si potrebbe anche provare ad avere i tag TD nella stessa tabella nidificata e vedere come funziona per voi.

Best

fonte

2015-05-22 05:25:53

In realtà ho appena avuto lo stesso identico problema. Ecco una soluzione solida mi si avvicinò con:

<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>

fonte

2015-10-15 21:56:55

Questo non è un compito facile a tutti e richiede un po 'di codice di ribadire. La soluzione migliore è usare MSO condizionale con tabelle per farlo funzionare per Outlook e div con display: inline-block per la maggior parte degli altri client. I tag Span come oggetti hanno un supporto molto macchiato in molti client, lo span è meglio utilizzato solo per i caratteri di stile nell'email HTML.

Vedere sotto per il blocco HTML programmatica:

<!--[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]-->

e questa è una versione completa utilizzando il codice HTML dal violino:

<!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>

fonte

2016-02-25 16:04:38 Gortonington

Bella soluzione. Ora tutti i tag possono essere ripetuti usando un blocco di codice. – Syfer

Elenco in linea dei tag nell'email HTML

risposta

Problemi correlati