在 Mailchimp 高级模式下，两列的划分不均等

我正在Mailchimp高级模式下创建一个带有表格的表单。我不能将 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>

这段代码有两个问题

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

修复这两件事，您的表单就会成形。

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

让我知道这是否是你所追求的。

相关内容

最新更新

热门标签：