2017-10-23 10 views
-2

マイナスのマージンとポジションプロパティは電子メールでサポートされませんが、マイナスマージンとポジションプロパティを使用してこれを行う方法を誰にでも教えていただけますか?マイナスのマージンはHTMLで許可されていません。

コード

<!DOCTYPE html> 
    <html lang="en"> 
     <head> 
      <title>Rejected Mailer</title> 
     </head> 
     <body> 
      <div class="middle" style="width:50%;margin:0 auto; background:#f4f4f4;"> 
     <div class="center_block" style="background:#fff;padding: 2%;height:auto;width:80%;margin:-8% auto; ox-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); word-wrap: break-word;"> 
      <h5>Dear Supplier,</h5> 
      <p>Your product has been rejected. Because of the following reasons:</p> 
       <ul> 
        <li>Product image quality should be high.</li> 
        <li>Make sure your product price should match with whole sale market price less than all retailer price.</li> 
        <li>Product description should match with product.</li> 
        <li>Should not copy the description of your product from any other ecommerce website.</li> 
        <li>Unit should match with product.</li> 
        <li> Before adding product, choose proper category of the product you are going to be add.</li> 
       </ul> 
       <h5>Your Product Details:</h5> 
       <ul class="nobullets"> 
        <li>Product Name: Rice Flour</li> 
        <li>Product Description: XXXXXXXXXX</li> 
       </ul> 
      </div> 
      <div class="footer" style="background:#000;padding: 1%;height:auto;width:80%;margin: 8% auto;color:#fff;"> 
       <p class="text-center">&copy ABC</p> 
      </div> 
    </div> 
     </body> 
    </html> 

I want output like this But i am getting output like this

+0

探しているものであれば、私に教えてください 'しかし、誰がどのようthis'を行うに私を提案することができ、正確に何をしますか? –

+0

_ "誰も私にこのことをどうやって提案することができますか" _ - do _what_? _unformatted_ HTMLコードを表示しました。インラインスタイルはなく、わからないクラスはいくつかあります。だからあなたが電子メールでそれをしたいのなら、それはコピー&ペーストです。それ以外の場合は、まず実際に達成したいことを説明する必要があります。 – CBroe

答えて

0

あなたの質問は非常に明確ではありません。私はあなたが負のマージンを使って考えたところは分かりません。多分、divを中心に置いていますか?とにかく、下のコードを見てください。あなたの写真を複製します。これはあなたが

<html lang="en"> 
 
     <head> 
 
      <title>Rejected Mailer</title> 
 
     </head> 
 
     <body> 
 
      <div class="middle" style="width:50%;margin:0 auto; background:#f4f4f4;"> 
 
     <div class="center_block" style="background:#fff;padding: 2%;height:auto;width:80%;margin:-8% auto; nox-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); word-wrap: break-word; box-sizing:border-box"> 
 
      <h5>Dear Supplier,</h5> 
 
      <p>Your product has been rejected. Because of the following reasons:</p> 
 
       <ul> 
 
        <li>Product image quality should be high.</li> 
 
        <li>Make sure your product price should match with whole sale market price less than all retailer price.</li> 
 
        <li>Product description should match with product.</li> 
 
        <li>Should not copy the description of your product from any other ecommerce website.</li> 
 
        <li>Unit should match with product.</li> 
 
        <li> Before adding product, choose proper category of the product you are going to be add.</li> 
 
       </ul> 
 
       <h5>Your Product Details:</h5> 
 
       <ul class="nobullets"> 
 
        <li>Product Name: Rice Flour</li> 
 
        <li>Product Description: XXXXXXXXXX</li> 
 
       </ul> 
 
      </div> 
 
      <div class="footer" style="background:#000;padding: 1%;height:auto;width:80%;margin: 8% auto;color:#fff;box-sizing:border-box"> 
 
       <p class="text-center">&copy ABC</p> 
 
      </div> 
 
    </div> 
 
     </body> 
 
    </html>

+0

あなたの忍耐力に感謝します。私のコードをチェックしてください。私はちょうど今編集しました@Mihai T –

+0

@MaruthiPrasadはあなたのコードで答えを変更しました。要素の内側にパディングが残り、要素の外側には広がらないように、 'box-sizing:border-box'を追加しました。 –

+0

ローカルホストではサポートしていますがメールでは機能しません –

関連する問題