我觉得因为无法解决这个问题而感到愚蠢所以我在这里，回到stackoverflow！我有一个非常基本的表用作预订表。用户必须使用日期和年份的下拉菜单完成登记日期和退房日期。出于某种原因，日期和月份之间存在很大差距，将月份和年份一直推到浏览器窗口的右侧。
为什么呢？我知道它必须是简单的东西，所以我因为无法弄清楚而自责。叹。你能救我吗？
这里是相关的代码（我已经将其更新为包括从头到尾，但从最后删除了很多javascript）。如果你把它们放在网址中，链接的css文件是可以访问的，但它们并没有告诉我多少..：
<link rel="stylesheet" type="text/css" href="http://www.emailmeform.com/builder/styles/dynamic.php?t=post" />
<link rel="stylesheet" type="text/css" href="http://www.emailmeform.com/builder/theme_css/f4kIcSddmwd92Jc1Zfx05Me8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined'){
document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-1.4.4.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
if (typeof $.ui == 'undefined'){
document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-ui-1.7.2.custom.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" src="http://www.emailmeform.com/builder/js/dynamic.php?t=post&t2=0&use_CDN=true"></script>
<div id="emf-container-outer">
<div id="emf-container">
<div id="emf-logo">
<a>EmailMeForm</a>
</div>
<form id="emf-form" class="leftLabel" enctype="multipart/form-data" method="post" action="http://www.emailmeform.com/builder/form/f4kIcSddmwd92Jc1Zfx05Me8" name="emf-form">
<div id="emf-form-instruction" class="emf-head-widget">
<div id="emf-form-description">
Please fill out the form below if you know which dates you would like to stay at Sarita.
</div>
</div>
<ul>
<li id="emf-li-0" class="emf-li-field emf-field-name data_container" style="text-align:left">
<label class="emf-label-desc" for="element_0">Name <span>*</span></label>
<div class="emf-div-field">
<span><input class="validate[required] emf-input-w60" value="" id="element_0_2" name="element_0[]" type="text" /> <label for="element_0_2" class=
"emf-bottom-label emf-text-center">First</label></span> <span><input class="validate[required] emf-input-w100" value="" id="element_0_3" name="element_0[]" type="text" /> <label for=
"element_0_3" class="emf-bottom-label emf-text-center">Last</label></span>
</div>
<div class="emf-clear"></div>
</li>
<li id="emf-li-1" class="emf-li-field emf-field-email data_container" style="text-align:left">
<label class="emf-label-desc" for="element_1">Email <span>*</span></label>
<div class="emf-div-field">
<input id="element_1" name="element_1" class="validate[required,custom[email]]" value="" size="30" type="text" />
</div>
<div class="emf-clear"></div>
</li>
<li id="emf-li-2" class="emf-li-field emf-field-select data_container" style="text-align:left">
<label class="emf-label-desc" for="element_2">Check-IN Date <span>*</span></label>
<div class="emf-div-field">
<select id="element_2" name="element_2" class="validate[required]">
<option value="" selected="selected">
Day
</option>
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
<option value="4">
4
</option>
<option value="5">
5
</option>
<option value="6">
6
</option>
<option value="7">
7
</option>
<option value="8">
8
</option>
<option value="9">
9
</option>
<option value="10">
10
</option>
<option value="11">
11
</option>
<option value="12">
12
</option>
<option value="13">
13
</option>
<option value="14">
14
</option>
<option value="15">
15
</option>
<option value="16">
16
</option>
<option value="17">
17
</option>
<option value="18">
18
</option>
<option value="19">
19
</option>
<option value="20">
20
</option>
<option value="21">
21
</option>
<option value="22">
22
</option>
<option value="23">
23
</option>
<option value="24">
24
</option>
<option value="25">
25
</option>
<option value="26">
26
</option>
<option value="27">
27
</option>
<option value="28">
28
</option>
<option value="29">
29
</option>
<option value="30">
30
</option>
<option value="31">
31
</option>
</select>
</div>
<div class="emf-clear"></div>
</li>
<li id="emf-li-3" class="emf-li-field emf-field-select data_container" style="text-align:left">
<div class="emf-div-field">
<select id="element_3" name="element_3" class="validate[optional]">
<option value="Month" selected="selected">
Month
</option>
<option value="January">
January
</option>
<option value="February">
February
</option>
<option value="March">
March
</option>
<option value="April">
April
</option>
<option value="May">
May
</option>
<option value="June">
June
</option>
<option value="July">
July
</option>
<option value="August">
August
</option>
<option value="September">
September
</option>
<option value="October">
October
</option>
<option value="November">
November
</option>
<option value="December">
December
</option>
</select>
</div>
<div class="emf-clear"></div>
</li>
<li id="emf-li-4" class="emf-li-field emf-field-select data_container" style="text-align:left">
<div class="emf-div-field">
<select id="element_4" name="element_4" class="validate[optional]">
<option value="Year" selected="selected">
Year
</option>
<option value="2011">
2011
</option>
<option value="2012">
2012
</option>
<option value="2013">
2013
</option>
<option value="2014">
2014
</option>
<option value="2015">
2015
</option>
<option value="2016">
2016
</option>
<option value="2017">
2017
</option>
<option value="2018">
2018
</option>
<option value="2019">
2019
</option>
<option value="2020">
2020
</option>
</select>
</div>
<div class="emf-clear"></div>
</li>
<li id="emf-li-5" class="emf-li-field emf-field-select data_container" style="text-align:left">
<label class="emf-label-desc" for="element_5">Check-OUT Date <span>*</span></label>
<div class="emf-div-field">
<select id="element_5" name="element_5" class="validate[required]">
<option value="" selected="selected">
Day
</option>
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
<option value="4">
4
</option>
<option value="5">
5
</option>
<option value="6">
6
</option>
<option value="7">
7
</option>
<option value="8">
8
</option>
<option value="9">
9
</option>
<option value="10">
10
</option>
<option value="11">
11
</option>
<option value="12">
12
</option>
<option value="13">
13
</option>
<option value="14">
14
</option>
<option value="15">
15
</option>
<option value="16">
16
</option>
<option value="17">
17
</option>
<option value="18">
18
</option>
<option value="19">
19
</option>
<option value="20">
20
</option>
<option value="21">
21
</option>
<option value="22">
22
</option>
<option value="23">
23
</option>
<option value="24">
24
</option>
<option value="25">
25
</option>
<option value="26">
26
</option>
<option value="27">
27
</option>
<option value="28">
28
</option>
<option value="29">
29
</option>
<option value="30">
30
</option>
<option value="31">
31
</option>
</select>
</div>
<div class="emf-clear"></div>
</li>
<li id="emf-li-6" class="emf-li-field emf-field-select data_container" style="text-align:left">
<div class="emf-div-field">
<select id="element_6" name="element_6" class="validate[optional]">
<option value="Month" selected="selected">
Month
</option>
<option value="January">
January
</option>
<option value="February">
February
</option>
<option value="March">
March
</option>
<option value="April">
April
</option>
<option value="May">
May
</option>
<option value="June">
June
</option>
<option value="July">
July
</option>
<option value="August">
August
</option>
<option value="September">
September
</option>
<option value="October">
October
</option>
<option value="November">
November
</option>
<option value="December">
December
</option>
</select>
</div>
<div class="emf-clear"></div>
</li>
<li id="emf-li-7" class="emf-li-field emf-field-select data_container" style="text-align:left">
<div class="emf-div-field">
<select id="element_7" name="element_7" class="validate[optional]">
<option value="Year" selected="selected">
Year
</option>
<option value="2011">
2011
</option>
<option value="2012">
2012
</option>
<option value="2013">
2013
</option>
<option value="2014">
2014
</option>
<option value="2015">
2015
</option>
<option value="2016">
2016
</option>
<option value="2017">
2017
</option>
<option value="2018">
2018
</option>
<option value="2019">
2019
</option>
<option value="2020">
2020
</option>
</select>
</div>
<div class="emf-clear"></div>
</li>
<li id="emf-li-8" class="emf-li-field emf-field-textarea data_container" style="text-align:left">
<label class="emf-label-desc" for="element_8">Special requests</label>
<div class="emf-div-field">
<textarea id="element_8" name="element_8" cols="45" rows="10" class="validate[optional]">
</textarea>
</div>
<div class="emf-clear"></div>
</li>
<li id="emf-li-recaptcha">
<script type="text/javascript">
//<![CDATA[
$(function(){
$('#recaptcha_response_field').addClass('validate[required]');
});
//]]>
</script>
<div>
<script type="text/javascript">
//<![CDATA[
var RecaptchaOptions = {
theme: 'clean',
custom_theme_widget: 'emf-recaptcha_widget'
};
//]]>
</script> <script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=6LchicQSAAAAAGksQmNaDZMw3aQITPqZEsX77lT9">
答案 0 :(得分：0)
答案 1 :(得分：0)
我编辑了完整的源代码。
使用任何diff程序比较两个文件来理解。
基本上你的月份和年份是不同的li标签，所以他们在下一行
<link rel="stylesheet" type="text/css" href="http://www.emailmeform.com/builder/styles/dynamic.php?t=post" />
<link rel="stylesheet" type="text/css" href="http://www.emailmeform.com/builder/theme_css/f4kIcSddmwd92Jc1Zfx05Me8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined'){
document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-1.4.4.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
if (typeof $.ui == 'undefined'){
document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-ui-1.7.2.custom.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" src="http://www.emailmeform.com/builder/js/dynamic.php?t=post&t2=0&use_CDN=true"></script>
<div id="emf-container-outer">
<div id="emf-container">
<div id="emf-logo">
<a>EmailMeForm</a>
</div>
<form id="emf-form" class="leftLabel" enctype="multipart/form-data" method="post" action="http://www.emailmeform.com/builder/form/f4kIcSddmwd92Jc1Zfx05Me8" name="emf-form">
<div id="emf-form-instruction" class="emf-head-widget">
<div id="emf-form-description">
Please fill out the form below if you know which dates you would like to stay at Sarita.
</div>
</div>
<ul>
<li id="emf-li-0" class="emf-li-field emf-field-name data_container" style="text-align:left">
<label class="emf-label-desc" for="element_0">Name <span>*</span></label>
<div class="emf-div-field">
<span><input class="validate[required] emf-input-w60" value="" id="element_0_2" name="element_0[]" type="text" /> <label for="element_0_2" class=
"emf-bottom-label emf-text-center">First</label></span> <span><input class="validate[required] emf-input-w100" value="" id="element_0_3" name="element_0[]" type="text" /> <label for=
"element_0_3" class="emf-bottom-label emf-text-center">Last</label></span>
</div>
<div class="emf-clear"></div>
</li>
<li id="emf-li-1" class="emf-li-field emf-field-email data_container" style="text-align:left">
<label class="emf-label-desc" for="element_1">Email <span>*</span></label>
<div class="emf-div-field">
<input id="element_1" name="element_1" class="validate[required,custom[email]]" value="" size="30" type="text" />
</div>
<div class="emf-clear"></div>
</li>
<li id="emf-li-2" class="emf-li-field emf-field-select data_container" style="text-align:left">
<label class="emf-label-desc" for="element_2">Check-IN Date <span>*</span></label>
<div class="emf-div-field">
<select id="element_2" name="element_2" class="validate[required]">
<option value="" selected="selected">
Day
</option>
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
<option value="4">
4
</option>
<option value="5">
5
</option>
<option value="6">
6
</option>
<option value="7">
7
</option>
<option value="8">
8
</option>
<option value="9">
9
</option>
<option value="10">
10
</option>
<option value="11">
11
</option>
<option value="12">
12
</option>
<option value="13">
13
</option>
<option value="14">
14
</option>
<option value="15">
15
</option>
<option value="16">
16
</option>
<option value="17">
17
</option>
<option value="18">
18
</option>
<option value="19">
19
</option>
<option value="20">
20
</option>
<option value="21">
21
</option>
<option value="22">
22
</option>
<option value="23">
23
</option>
<option value="24">
24
</option>
<option value="25">
25
</option>
<option value="26">
26
</option>
<option value="27">
27
</option>
<option value="28">
28
</option>
<option value="29">
29
</option>
<option value="30">
30
</option>
<option value="31">
31
</option>
</select>
<select id="element_3" name="element_3" class="validate[optional]">
<option value="Month" selected="selected">
Month
</option>
<option value="January">
January
</option>
<option value="February">
February
</option>
<option value="March">
March
</option>
<option value="April">
April
</option>
<option value="May">
May
</option>
<option value="June">
June
</option>
<option value="July">
July
</option>
<option value="August">
August
</option>
<option value="September">
September
</option>
<option value="October">
October
</option>
<option value="November">
November
</option>
<option value="December">
December
</option>
</select>
<select id="element_4" name="element_4" class="validate[optional]">
<option value="Year" selected="selected">
Year
</option>
<option value="2011">
2011
</option>
<option value="2012">
2012
</option>
<option value="2013">
2013
</option>
<option value="2014">
2014
</option>
<option value="2015">
2015
</option>
<option value="2016">
2016
</option>
<option value="2017">
2017
</option>
<option value="2018">
2018
</option>
<option value="2019">
2019
</option>
<option value="2020">
2020
</option>
</select>
</div>
<div class="emf-clear"></div>
</li>
<li id="emf-li-5" class="emf-li-field emf-field-select data_container" style="text-align:left">
<label class="emf-label-desc" for="element_5">Check-OUT Date <span>*</span></label>
<div class="emf-div-field">
<select id="element_5" name="element_5" class="validate[required]">
<option value="" selected="selected">
Day
</option>
<option value="1">
1
</option>
<option value="2">
2
</option>
<option value="3">
3
</option>
<option value="4">
4
</option>
<option value="5">
5
</option>
<option value="6">
6
</option>
<option value="7">
7
</option>
<option value="8">
8
</option>
<option value="9">
9
</option>
<option value="10">
10
</option>
<option value="11">
11
</option>
<option value="12">
12
</option>
<option value="13">
13
</option>
<option value="14">
14
</option>
<option value="15">
15
</option>
<option value="16">
16
</option>
<option value="17">
17
</option>
<option value="18">
18
</option>
<option value="19">
19
</option>
<option value="20">
20
</option>
<option value="21">
21
</option>
<option value="22">
22
</option>
<option value="23">
23
</option>
<option value="24">
24
</option>
<option value="25">
25
</option>
<option value="26">
26
</option>
<option value="27">
27
</option>
<option value="28">
28
</option>
<option value="29">
29
</option>
<option value="30">
30
</option>
<option value="31">
31
</option>
</select>
<select id="element_6" name="element_6" class="validate[optional]">
<option value="Month" selected="selected">
Month
</option>
<option value="January">
January
</option>
<option value="February">
February
</option>
<option value="March">
March
</option>
<option value="April">
April
</option>
<option value="May">
May
</option>
<option value="June">
June
</option>
<option value="July">
July
</option>
<option value="August">
August
</option>
<option value="September">
September
</option>
<option value="October">
October
</option>
<option value="November">
November
</option>
<option value="December">
December
</option>
</select>
<select id="element_7" name="element_7" class="validate[optional]">
<option value="Year" selected="selected">
Year
</option>
<option value="2011">
2011
</option>
<option value="2012">
2012
</option>
<option value="2013">
2013
</option>
<option value="2014">
2014
</option>
<option value="2015">
2015
</option>
<option value="2016">
2016
</option>
<option value="2017">
2017
</option>
<option value="2018">
2018
</option>
<option value="2019">
2019
</option>
<option value="2020">
2020
</option>
</select>
</div>
<div class="emf-clear"></div>
</li>
<li id="emf-li-8" class="emf-li-field emf-field-textarea data_container" style="text-align:left">
<label class="emf-label-desc" for="element_8">Special requests</label>
<div class="emf-div-field">
<textarea id="element_8" name="element_8" cols="45" rows="10" class="validate[optional]">
</textarea>
</div>
<div class="emf-clear"></div>
</li>
<li id="emf-li-recaptcha">
<script type="text/javascript">
//<![CDATA[
$(function(){
$('#recaptcha_response_field').addClass('validate[required]');
});
//]]>
</script>
<div>
<script type="text/javascript">
//<![CDATA[
var RecaptchaOptions = {
theme: 'clean',
custom_theme_widget: 'emf-recaptcha_widget'
};
//]]>
</script> <script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=6LchicQSAAAAAGksQmNaDZMw3aQITPqZEsX77lT9">
答案 2 :(得分：0)
简单解决这个问题！
您需要从html中删除12行代码，然后删除您在css 618 中定义的width:64%; > dynamic.php ：
#emf-container #emf-form.leftLabel div.emf-div-field,
#emf-container #emf-form.rightLabel div.emf-div-field{float:left;width:64%;}
要删除的行位于3个选择框之间：
在月份选择框之前，删除：
<div class="emf-clear"></div>
</li>
<li id="emf-li-3" class="emf-li-field emf-field-select data_container" style="text-align:left">
在年份选择框之前，请删除：
<div class="emf-clear"></div>
</li>
<li id="emf-li-4" class="emf-li-field emf-field-select data_container" style="text-align:left">
为结帐部分执行相同的删除流程，您就是金色的！
祝你好运！仅供参考，当您将内容包装在<li>标签中时，它会将其构建在垂直列表中。您可以使用li{float:left;}水平放置列表堆栈，但这不适用于内容结构的方式。只需删除上面提到的行，然后重写代码就会轻松得多。
干杯！