電子メールのスパンでラベルをインラインで取得できません

Question

したがって、ユーザーからの情報を電子メールで送信しようとしています。

しかし、それはこのようになりますようCSSは、電子メールでは動作しません何らかの理由：：次のようにCSSがある

それは次のようになります。

div.block { 
     margin: 0; 
     padding: 0; 
     padding-bottom: 1.25em; 
     margin-left: 130px; 
    } 

    div.block label { 
     margin: 0; 
     padding: 0; 
     display: block; 
     font-size: 100%; 
     padding-top: .1em; 
     padding-right: .25em; 
     width: 6em; 
     text-align: right; 
     float: left; 
    } 

    div.block span { 
     margin: 0; 
     padding: 0; 
     display: block; 
     font-size: 100%; 
    } 

そして、私のHTML：

<div class="block"> 
    <label>Voornaam:</label> 
    <span>%voornaam%</span> 
</div> 
<div class="block"> 
    <label>Achternaam:</label> 
    <span>%achternaam%</span> 
</div> 
<div class="block"> 
    <label>E-mailadres:</label> 
    <span>%email%</span> 
</div> 
<div class="block"> 
    <label>Telefoon:</label> 
    <span>%telefoon%</span> 
</div> 
<div class="block"> 
    <label>Toelichting:</label> 
    <span>%toelichting%</span> 
</div> 
<div class="block"> 
    <label>Datum:</label> 
    <span>%datum%</span> 
</div> 

Answer 1

メールのCSSは、まだよくサポートされていません。必要なレイアウトでは、divベースのレイアウトではなくインラインスタイルの<table>を使用するのが最適な方法です。

Answer 2

あなたのCSSでいくつかの簡単な修正は、その修正されます：https://jsfiddle.net/zL2ntzdh/

---

私はHTMLマークアップを使用していることを追加したいと述べた。

div.block { 
    margin: 0; 
    padding: 0; 
    padding-bottom: 1.25em; 
    margin-left: 130px; 
} 

div.block label { 
    margin: 0; 
    padding: 0; 
    display: inline-block; 
    font-size: 100%; 
    padding-top: .1em; 
    padding-right: 2em; 
    width: 6em; 
    text-align: right; 
} 

div.block span { 
    margin: 0; 
    padding: 0; 
    display: inline-block; 
    font-size: 100%; 
    width: 20em; 
} 

を私がデモンストレーションとしてjsfiddleを準備しました電子メールメッセージは疑わしいものです。はい、それはメッセージを少し光沢に見せます。しかし、それには大きな欠点があります：メッセージのサイズが増えて、あなたのメッセージが迷惑メールと見なされる可能性は自動的に増えます。あなたはアドレスからの究極の信頼を要求します。そのため多くの人が黙ってメッセージを削除することを期待する必要がありますセキュリティ上の問題。画像はあなたがテーブルには罰金を行うだろう必要があるものであれば

Answer 3

。 padding-leftは、レイアウトに最適と思われるものに調整できます。 margin-left: 10pxまたは何かをテーブル自体に追加して、テーブルを右に移動することができます。電子メールクライアントのための

<table class="emailtable"> 
<tr> 
    <td>Voornaam:</td> 
    <td style="padding-left: 40px;">%voornaam%</td> 
</tr> 
<tr> 
    <td>Achternaam:</td> 
    <td style="padding-left: 40px;">%achternaam%</td> 
</tr> 
<tr> 
    <td>E-mailadres:</td> 
    <td style="padding-left: 40px;">%email%</td> 
</tr> 
<tr> 
    <td>Telefoon:</td> 
    <td style="padding-left: 40px;">%telefoon%</td> 
</tr> 
<tr> 
    <td>Toelichting:</td> 
    <td style="padding-left: 40px;">%toelichting%</td> 
</tr> 
<tr> 
    <td>Datum:</td> 
    <td style="padding-left: 40px;">%datum%</td> 
</tr>