2017-07-27 6 views
-1

Mailchimp Advancedモードでテーブルを含むフォームを作成しています。私は2つの列を50%〜50%に分けることはできません。左の列が右よりも多くのスペースを取る理由はわかりません。2つの列がMailchimpアドバンストモードで均等に分割されない

.formLabel { 
 
    vertical-align: top; 
 
    font-size: 14px; 
 
    color: #4d858d; 
 
    font-weight: bold; 
 
    text-align: left; 
 
    margin: 22px; 
 
    padding: 10 15 10 15; 
 
    width: auto; 
 
} 
 
.container { 
 
    background-color: #FFFFFF; 
 
    width: 700px; 
 
    border: none; 
 
    padding: 5 5 15 5; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
ul,li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
body { 
 
    background-color: #FFFFFF; 
 
    font-family: verdana; 
 
    font-size: 12px; 
 
    text-align: center; 
 
    min-width: 700px; 
 
    margin: 20 0 0 0; 
 
} 
 
input[type="text"] { 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    background-color: #F5F5F5; 
 
    border-width: 0px; 
 
    border-style: solid; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    font-size: 14px; 
 
    padding: 6 10 6 10; 
 
    box-sizing: border-box; 
 
    font-weight: normal; 
 
    box-shadow: 0 3px 0px rgba(0, 0, 0, 0.075); 
 
} 
 
.select-small { 
 
    width: 100%; 
 
    height: 27; 
 
    webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    background-color: #F5F5F5; 
 
    border-width: 0px; 
 
    border-style: solid; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    box-shadow: 0 3px 0px rgba(0, 0, 0, 0.075); 
 
}
<tr> 
 
    <td align="left" class="formLabel">Anrede <span class="req asterisk">*</span> 
 
     <br> 
 
     <div class="interestgroup_field radio-group" id="MERGE3"> 
 
      <label class="radio" for="MERGE3-0"> 
 
       <input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-0" value="Herr" class="av-radio"><span>Herr</span></label> 
 
      <label class="radio" for="MERGE3-1"> 
 
       <input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-1" value="Herr" class="av-radio"><span>Frau</span></label> 
 
      <label class="radio" for="MERGE3-2"> 
 
       <input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-2" value="Dr" class="av-radio"><span>Dr</span></label> 
 
     </div> 
 
     <br> 
 
     <div class="error">*|HTML:MMERGE3ERROR|*</div> 
 
    </td> 
 
</tr> 
 

 
<tr> 
 
    <td align="left" class="formLabel">Vorname <span class="req asterisk">*</span> 
 
     <br> 
 
     <input type="text" name="MERGE1" id="MERGE1" size="35" value="*|MERGE1|*"> 
 
     <br> 
 
     <div class="error">*|HTML:FNAMEERROR|*</div> 
 
    </td> 
 

 

 

 
    <td align="left" class="formLabel">Nachname <span class="req asterisk">*</span> 
 
     <br> 
 
     <input type="text" name="MERGE2" id="MERGE2" size="35" value="*|MERGE2|*"> 
 
     <br> 
 
     <div class="error">*|HTML:LNAMEERROR|*</div> 
 
    </td> 
 
</tr> 
 

 
<tr> 
 
    <td align="left" class="formLabel">Position 
 
     <br> 
 
     <input type="text" name="MERGE5" id="MERGE5" value="*|MERGE5|*"> 
 
     <br> 
 
     <div class="error">*|HTML:MMERGE5ERROR|*</div> 
 
    </td> 
 

 

 

 
    <td align="left" class="formLabel">Firma <span class="req asterisk">*</span> 
 
     <br> 
 
     <input type="text" name="MERGE6" id="MERGE6" value="*|MERGE6|*"> 
 
     <br> 
 
     <div class="error">*|HTML:MMERGE6ERROR|*</div> 
 
    </td> 
 
</tr>

+0

[もっと速い回答を得るために、どのような状況で「緊急」や他の類似のフレーズを追加することができますか?](// meta.stackoverflow.com/q/326569) - 要約は、ボランティアに対処する理想的な方法ではなく、おそらく回答を得ることに逆効果があります。これをあなたの質問に追加しないでください。 – halfer

+0

ここでもコードの書式設定ツールを学んでください。 '>'引用ツールではなく '{}'コードツールが必要です。 – halfer

答えて

0

あなたが起動し、テーブルを終了するコードが欠落している、このコード

  1. と間違って二つのものがあります。あなたのHTMLが前に閉じ<table width="100%" border="0" cellspacing="0" cellpadding="0"></table>
  2. スタイルタグ。

これらの2つの問題を修正し、フォームの形が整います。

<html> 
 

 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 

 

 

 

 
<tr> 
 
        <td colspan="2" align="left" class="formLabel">Anrede <span class="req asterisk">*</span><br> 
 
        <div class="interestgroup_field radio-group" id="MERGE3"> <label class="radio" for="MERGE3-0"><input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-0" value="Herr" class="av-radio"><span>Herr</span></label><label class="radio" for="MERGE3-1"><input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-1" value="Herr" class="av-radio"><span>Frau</span></label><label class="radio" for="MERGE3-2"><input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-2" value="Dr" class="av-radio"><span>Dr</span></label> </div> 
 
         <br><div class="error">*|HTML:MMERGE3ERROR|*</div> 
 
        </td> 
 
       </tr> 
 

 
       <tr> 
 
        <td align="left" class="formLabel">Vorname <span class="req asterisk">*</span><br> 
 
        <input type="text" name="MERGE1" id="MERGE1" size="35" value="*|MERGE1|*"> 
 
         <br> <div class="error">*|HTML:FNAMEERROR|*</div> 
 
        </td> 
 

 

 

 
        <td align="left" class="formLabel">Nachname <span class="req asterisk">*</span><br> 
 
        <input type="text" name="MERGE2" id="MERGE2" size="35" value="*|MERGE2|*"> 
 
         <br> <div class="error">*|HTML:LNAMEERROR|*</div> 
 
        </td> 
 
       </tr> 
 

 
       <tr> 
 
        <td align="left" class="formLabel">Position <br> 
 
        <input type="text" name="MERGE5" id="MERGE5" value="*|MERGE5|*"> 
 
         <br> <div class="error">*|HTML:MMERGE5ERROR|*</div> 
 
        </td> 
 

 

 

 
        <td align="left" class="formLabel">Firma <span class="req asterisk">*</span><br> 
 
        <input type="text" name="MERGE6" id="MERGE6" value="*|MERGE6|*"> 
 
         <br> <div class="error">*|HTML:MMERGE6ERROR|*</div> 
 
        </td> 
 
       </tr> 
 
    </tr> 
 
</table> 
 
<style> .formLabel { 
 
    vertical-align: top;   
 
    font-size: 14px; 
 
    color: #4d858d; 
 
    font-weight: bold; 
 
    text-align: left; 
 
    /*margin: 22px; 
 
    padding: 10 15 10 15;*/ 
 
    width: auto; 
 
\t border:1px solid #000000; 
 
      } 
 
.container { 
 
      background-color: #FFFFFF; 
 
      width: 700px; 
 
      border: none; 
 
      /*padding: 5 5 15 5;*/ 
 
      margin-left: auto; 
 
      margin-right: auto; 
 
     } ul, 
 
     li { 
 
      margin: 0; 
 
      padding: 0; 
 
      list-style: none; 
 
     } body { 
 
      background-color: #FFFFFF; 
 
      font-family:verdana; 
 
      font-size: 12px; 
 
      text-align: center; 
 
      min-width: 700px; 
 
      margin: 20 0 0 0; 
 
     } input[type="text"] { 
 
-webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    background-color: #F5F5F5; 
 
    border-width: 0px; 
 
    border-style: solid; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    font-size: 14px; 
 
    padding: 6 10 6 10; 
 
    box-sizing: border-box; 
 
    font-weight: normal; 
 
    box-shadow: 0 3px 0px rgba(0, 0, 0, 0.075); } 
 

 
.select-small { 
 
    width: 100%; 
 
    height: 27; 
 
    webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    background-color: #F5F5F5; 
 
    border-width: 0px; 
 
    border-style: solid; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    box-shadow: 0 3px 0px rgba(0, 0, 0, 0.075); } 
 
\t </style></html>

これはあなたが後にしたものであれば、私に教えてください。

関連する問題