在Mailchimp高级模式中，两列不同等分

时间：2017-07-27 11:11:09

标签： html css forms mailchimp

我正在使用Mailchimp Advanced模式创建一个包含表格的表单。我不能将2列分为50％ - 50％。我不知道为什么左栏比右栏占用更多的空间。

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

1 个答案:

答案 0 :(得分：0)

此代码有两个问题

  1. 您缺少开始和结束表格<table width="100%" border="0" cellspacing="0" cellpadding="0">和</table>
    2. 的代码
  2. 您的HTML会在样式标记之前关闭。

    3. 修复这两件事，你的表格就会成形。

    <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;
	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); } 
	</style></html>

    请告诉我这是你所追求的。

相关问题
最新问题