为什么输入占用2个空格？
Why is the input taking up 2 spaces?
我的输入有问题。
如您所见，我的输入占用了太多 space。它没有边距或填充。
这是我的代码（我使用的是 Boilerplate v5.3.0）。
我怎样才能修复它，让它只占用它需要的 space？
$(document).ready(function() {
$('.selectList').hide();
$('.selectorWrapper a').click(function() {
hideShow(this);
});
$('ul.selectList li').click(function() {
changeText(this);
validate();
});
$('#email').keydown(function() {
var correo = $('#email').val();
if (validateMail(correo)) {
$('#email').css('borderColor', '#87e466');
validate();
} else {
$('#email').css('borderColor', '#ca3535');
validate();
}
});
function validateMail(email) {
var re = /^(([^<>()\[\]\.,;:\s@"]+(\.[^<>()\[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
console.log(re.test(email));
return re.test(email);
}
function validate() {
var select1 = $('#selection1').text();
var select2 = $('#selection2').text();
var select3 = $('#selection3').val();
var email = $('#email').val();
if (select1 != 'Marca' && select2 != 'Modelo' && select3 != 'Anio' && validateMail(email)) {
$('#submitBtn').css({
'backgroundColor': '#bbd550',
'boxShadow': '0px 3px 0px 0px #9fbc2d'
});
$('#submitBtn').removeClass('disableClick');
} else {
$('#submitBtn').css({
'backgroundColor': '#808080',
'boxShadow': '0px 3px 0px 0px #636161'
});
$('#submitBtn').addClass('disableClick');
}
}
function hideShow(element) {
var thisId = $(element).attr('id');
var isHidden = $('#' + thisId).next().css('display');
console.log(isHidden);
if (isHidden == 'none') {
$('#' + thisId).next().slideDown();
} else {
$('#' + thisId).next().slideUp();
}
}
function changeText(element) {
var text = $(element).text();
$(element).parent().prev().text(text);
$(element).parent().prev().append('<i class="fa fa-chevron-down"></i>');
$(element).parent().slideUp();
$(element).parent().prev().css('borderColor', '#87e466')
}
});
html {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input {
outline: none;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
.disableClick {
pointer-events: none;
}
label {
display: none;
}
h3,
h2 {
margin: 0 auto;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
header.site-header {
background-color: #000000;
width: 100%;
}
header.site-header h3 {
text-align: center;
color: #ffffff;
padding: 15px 0;
font-weight: normal;
font-size: 30px;
}
header.site-header h3 span {
font-weight: bold;
}
div.banner {
border-bottom: 5px solid #36aadd;
}
div.banner h2 {
font-size: 2em;
text-align: center;
font-weight: bold;
color: #36aadd;
padding: 15px 10px 10px 10px;
}
div.banner p {
color: #888888;
text-align: center;
margin: 0;
font-size: 1.2em;
padding-bottom: 50px;
font-family: 'Open Sans', sans-serif;
}
div.form {
padding: 20px 10px;
margin: 0;
background-color: #eeeeee;
}
a.selectButton {
text-decoration: none;
padding: 10px;
color: #888888;
background-color: #ffffff;
border: 1px solid #d0d0d0;
display: block;
width: 100%;
margin: 0;
}
a.selectButton i {
color: #d0d0d0;
float: right;
padding-right: 10px;
}
ul.selectList {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #d0d0d0;
width: 100%;
position: absolute;
}
ul.selectList li {
width: 100%;
padding: 10px 0 10px 10px;
display: block;
background-color: #ffffff;
}
ul.selectList li a {
display: block;
text-decoration: none;
color: #888888;
}
ul.selectList li:hover {
background-color: #d0d0d0;
}
div.selectorWrapper input {
margin: 0;
padding: 10px;
width: 100%;
border: 1px solid #d0d0d0;
border-top: none;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
div.selectorWrapper {
/*width:100%;*/
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 50%;
float: left;
}
div.selectorWrapper .button {
background-color: #808080;
color: #FFFFFF;
margin-top: 30px;
border-radius: 4px;
margin-bottom: 20px;
font-size: 30px;
box-shadow: 0px 3px 0px 0px #636161;
border: none;
font-family: 'Open Sans', sans-serif;
}
div.recuperar {
text-align: center;
padding: 20px;
}
div.recuperar a.recupera-link {
text-decoration: none;
color: #5faadb;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
}
.contenedorA {
position: relative;
}
@media only screen and (min-width: 768px) {
label {
display: block;
width: 30%;
float: left;
padding: 10px 0 0 15px;
text-align: left;
font-size: 0.9em;
}
div.banner {
border: none;
}
div.form {
background: #ffffff;
}
.contenedorA {
padding: 100px 50px 0 50px;
}
.contenedor {
width: 96%;
margin: 0 auto!important;
box-shadow: 0px 0px 10px 3px #f9f9f9;
margin-top: 50px;
}
div.selectorWrapper {
width: 80%;
margin: 20px auto;
}
div.selectorWrapper input,
div.selectorWrapper a.selectButton {
width: 70%;
float: right;
margin: 0 auto;
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 80%;
float: none;
position: relative;
}
ul.selectList {
position: relative;
margin-left: 420px;
margin-top: 44px;
}
div.selectorWrapper input {
border: 1px solid #d0d0d0;
}
div.recuperar {
padding-left: 100px;
}
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel='stylesheet' href='css/main.css' type="text/css">
<!--<link rel='stylesheet' href='css/normalize.css' type="text/css">-->
</head>
<body>
<header class='site-header'>
<h3><span>compara</span>online</h3>
</header>
<div class=contenedorA>
<div class="contenedor">
<div class="banner">
<h2>Cotiza tu Seguro Automotriz</h2>
<p>Resultados instantaneos!</p>
</div>
<div class="form clearfix">
<form method="post" action="">
<div class="selectorWrapper clearfix">
<label>Marca : </label>
<a class="selectButton" id="selection1" href="#">Marca<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li><a href="#">Hyundai</a></li>
<li><a href="#">Toyota</a></li>
<li><a href="#">Nissan</a></li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Modelo : </label>
<a class="selectButton" id="selection2" href="#">Modelo<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li><a href="#">Sedan</a></li>
<li><a href="#">SUV</a></li>
<li><a href="#">Pick-up</a></li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Anio: </label>
<a class="selectButton" id="selection3" href="#">Anio<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li><a href="#">2017</a></li>
<li><a href="#">2016</a></li>
<li><a href="#">2015</a></li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<!--<label>Email : </label>-->
<input type='email' name='email' class="clearfix" id='email' placeholder='Email' required>
</div>
<div class="selectorWrapper clearfix">
<input type='submit' class="button disableClick" id='submitBtn' value="Cotizar">
</div>
</form>
<div class="recuperar">
<a class="recupera-link" href="#">Recuperar cotizacion</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src='js/main.js' type="text/javascript"></script>
浮动元素时，会将其从文档的正常流中移除。结果，其他 block 元素不遵守它们的 space.
由于行中的两个元素（Modelo 和 Anio）都是 float: left，下一个块元素（电子邮件）看不到它们，并采用了它们的 space。所以电子邮件 div 现在隐藏在拆分元素下。
但是，电子邮件 div 中的 input 元素不是块元素。默认情况下，它是一个内联元素。内联元素尊重浮动元素的 space 。 （这就是文本能够环绕浮动图像的方式。）
因此在您的代码中，当电子邮件 div 移动到拆分元素下方（在 z 轴上）时，电子邮件 div 中的输入保持在拆分元素下方（在 y 轴上） -轴）。
当您在开发工具中突出显示电子邮件元素时，它说明了这种分为两行的情况。
一种解决方案是提供电子邮件 div display: inline-block 和 width: 100%。
div.selectorWrapper:nth-child(4) {
display: inline-block;
width: 100%;
}
另一个解决方案是将 clear: both 添加到电子邮件 div。 (Read more about clearing floats.)
div.selectorWrapper:nth-child(4) {
clear: both;
}
$(document).ready(function() {
$('.selectList').hide();
$('.selectorWrapper a').click(function() {
hideShow(this);
});
$('ul.selectList li').click(function() {
changeText(this);
validate();
});
$('#email').keydown(function() {
var correo = $('#email').val();
if (validateMail(correo)) {
$('#email').css('borderColor', '#87e466');
validate();
} else {
$('#email').css('borderColor', '#ca3535');
validate();
}
});
function validateMail(email) {
var re = /^(([^<>()\[\]\.,;:\s@"]+(\.[^<>()\[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
console.log(re.test(email));
return re.test(email);
}
function validate() {
var select1 = $('#selection1').text();
var select2 = $('#selection2').text();
var select3 = $('#selection3').val();
var email = $('#email').val();
if (select1 != 'Marca' && select2 != 'Modelo' && select3 != 'Anio' && validateMail(email)) {
$('#submitBtn').css({
'backgroundColor': '#bbd550',
'boxShadow': '0px 3px 0px 0px #9fbc2d'
});
$('#submitBtn').removeClass('disableClick');
} else {
$('#submitBtn').css({
'backgroundColor': '#808080',
'boxShadow': '0px 3px 0px 0px #636161'
});
$('#submitBtn').addClass('disableClick');
}
}
function hideShow(element) {
var thisId = $(element).attr('id');
var isHidden = $('#' + thisId).next().css('display');
console.log(isHidden);
if (isHidden == 'none') {
$('#' + thisId).next().slideDown();
} else {
$('#' + thisId).next().slideUp();
}
}
function changeText(element) {
var text = $(element).text();
$(element).parent().prev().text(text);
$(element).parent().prev().append('<i class="fa fa-chevron-down"></i>');
$(element).parent().slideUp();
$(element).parent().prev().css('borderColor', '#87e466')
}
});
div.selectorWrapper:nth-child(4) {
clear: both;
}
html {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input {
outline: none;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
.disableClick {
pointer-events: none;
}
label {
display: none;
}
h3,
h2 {
margin: 0 auto;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
header.site-header {
background-color: #000000;
width: 100%;
}
header.site-header h3 {
text-align: center;
color: #ffffff;
padding: 15px 0;
font-weight: normal;
font-size: 30px;
}
header.site-header h3 span {
font-weight: bold;
}
div.banner {
border-bottom: 5px solid #36aadd;
}
div.banner h2 {
font-size: 2em;
text-align: center;
font-weight: bold;
color: #36aadd;
padding: 15px 10px 10px 10px;
}
div.banner p {
color: #888888;
text-align: center;
margin: 0;
font-size: 1.2em;
padding-bottom: 50px;
font-family: 'Open Sans', sans-serif;
}
div.form {
padding: 20px 10px;
margin: 0;
background-color: #eeeeee;
}
a.selectButton {
text-decoration: none;
padding: 10px;
color: #888888;
background-color: #ffffff;
border: 1px solid #d0d0d0;
display: block;
width: 100%;
margin: 0;
}
a.selectButton i {
color: #d0d0d0;
float: right;
padding-right: 10px;
}
ul.selectList {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #d0d0d0;
width: 100%;
position: absolute;
}
ul.selectList li {
width: 100%;
padding: 10px 0 10px 10px;
display: block;
background-color: #ffffff;
}
ul.selectList li a {
display: block;
text-decoration: none;
color: #888888;
}
ul.selectList li:hover {
background-color: #d0d0d0;
}
div.selectorWrapper input {
margin: 0;
padding: 10px;
width: 100%;
border: 1px solid #d0d0d0;
border-top: none;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
div.selectorWrapper {
/*width:100%;*/
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 50%;
float: left;
}
div.selectorWrapper .button {
background-color: #808080;
color: #FFFFFF;
margin-top: 30px;
border-radius: 4px;
margin-bottom: 20px;
font-size: 30px;
box-shadow: 0px 3px 0px 0px #636161;
border: none;
font-family: 'Open Sans', sans-serif;
}
div.recuperar {
text-align: center;
padding: 20px;
}
div.recuperar a.recupera-link {
text-decoration: none;
color: #5faadb;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
}
.contenedorA {
position: relative;
}
@media only screen and (min-width: 768px) {
label {
display: block;
width: 30%;
float: left;
padding: 10px 0 0 15px;
text-align: left;
font-size: 0.9em;
}
div.banner {
border: none;
}
div.form {
background: #ffffff;
}
.contenedorA {
padding: 100px 50px 0 50px;
}
.contenedor {
width: 96%;
margin: 0 auto!important;
box-shadow: 0px 0px 10px 3px #f9f9f9;
margin-top: 50px;
}
div.selectorWrapper {
width: 80%;
margin: 20px auto;
}
div.selectorWrapper input,
div.selectorWrapper a.selectButton {
width: 70%;
float: right;
margin: 0 auto;
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 80%;
float: none;
position: relative;
}
ul.selectList {
position: relative;
margin-left: 420px;
margin-top: 44px;
}
div.selectorWrapper input {
border: 1px solid #d0d0d0;
}
div.recuperar {
padding-left: 100px;
}
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel='stylesheet' href='css/main.css' type="text/css">
<!--<link rel='stylesheet' href='css/normalize.css' type="text/css">-->
</head>
<body>
<header class='site-header'>
<h3><span>compara</span>online</h3>
</header>
<div class=contenedorA>
<div class="contenedor">
<div class="banner">
<h2>Cotiza tu Seguro Automotriz</h2>
<p>Resultados instantaneos!</p>
</div>
<div class="form clearfix">
<form method="post" action="">
<div class="selectorWrapper clearfix">
<label>Marca : </label>
<a class="selectButton" id="selection1" href="#">Marca<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li><a href="#">Hyundai</a></li>
<li><a href="#">Toyota</a></li>
<li><a href="#">Nissan</a></li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Modelo : </label>
<a class="selectButton" id="selection2" href="#">Modelo<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li><a href="#">Sedan</a></li>
<li><a href="#">SUV</a></li>
<li><a href="#">Pick-up</a></li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Anio: </label>
<a class="selectButton" id="selection3" href="#">Anio<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li><a href="#">2017</a></li>
<li><a href="#">2016</a></li>
<li><a href="#">2015</a></li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<!--<label>Email : </label>-->
<input type='email' name='email' class="clearfix" id='email' placeholder='Email' required>
</div>
<div class="selectorWrapper clearfix">
<input type='submit' class="button disableClick" id='submitBtn' value="Cotizar">
</div>
</form>
<div class="recuperar">
<a class="recupera-link" href="#">Recuperar cotizacion</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src='js/main.js' type="text/javascript"></script>
在您的问题中，您正在显示 div 的属性，请检查 div 内 a 标签的属性。 a 标签有 padding:10px;.
这是因为 a.selectButton 的内边距为 10px。您可以完全删除它，也可以只删除左边的填充来解决问题。
a.selectButton {
padding-left: 0;
}
在您的样式标签中插入以上代码以解决问题。
我的输入有问题。
如您所见，我的输入占用了太多 space。它没有边距或填充。
这是我的代码（我使用的是 Boilerplate v5.3.0）。
我怎样才能修复它，让它只占用它需要的 space？
$(document).ready(function() {
$('.selectList').hide();
$('.selectorWrapper a').click(function() {
hideShow(this);
});
$('ul.selectList li').click(function() {
changeText(this);
validate();
});
$('#email').keydown(function() {
var correo = $('#email').val();
if (validateMail(correo)) {
$('#email').css('borderColor', '#87e466');
validate();
} else {
$('#email').css('borderColor', '#ca3535');
validate();
}
});
function validateMail(email) {
var re = /^(([^<>()\[\]\.,;:\s@"]+(\.[^<>()\[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
console.log(re.test(email));
return re.test(email);
}
function validate() {
var select1 = $('#selection1').text();
var select2 = $('#selection2').text();
var select3 = $('#selection3').val();
var email = $('#email').val();
if (select1 != 'Marca' && select2 != 'Modelo' && select3 != 'Anio' && validateMail(email)) {
$('#submitBtn').css({
'backgroundColor': '#bbd550',
'boxShadow': '0px 3px 0px 0px #9fbc2d'
});
$('#submitBtn').removeClass('disableClick');
} else {
$('#submitBtn').css({
'backgroundColor': '#808080',
'boxShadow': '0px 3px 0px 0px #636161'
});
$('#submitBtn').addClass('disableClick');
}
}
function hideShow(element) {
var thisId = $(element).attr('id');
var isHidden = $('#' + thisId).next().css('display');
console.log(isHidden);
if (isHidden == 'none') {
$('#' + thisId).next().slideDown();
} else {
$('#' + thisId).next().slideUp();
}
}
function changeText(element) {
var text = $(element).text();
$(element).parent().prev().text(text);
$(element).parent().prev().append('<i class="fa fa-chevron-down"></i>');
$(element).parent().slideUp();
$(element).parent().prev().css('borderColor', '#87e466')
}
});
html {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input {
outline: none;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
.disableClick {
pointer-events: none;
}
label {
display: none;
}
h3,
h2 {
margin: 0 auto;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
header.site-header {
background-color: #000000;
width: 100%;
}
header.site-header h3 {
text-align: center;
color: #ffffff;
padding: 15px 0;
font-weight: normal;
font-size: 30px;
}
header.site-header h3 span {
font-weight: bold;
}
div.banner {
border-bottom: 5px solid #36aadd;
}
div.banner h2 {
font-size: 2em;
text-align: center;
font-weight: bold;
color: #36aadd;
padding: 15px 10px 10px 10px;
}
div.banner p {
color: #888888;
text-align: center;
margin: 0;
font-size: 1.2em;
padding-bottom: 50px;
font-family: 'Open Sans', sans-serif;
}
div.form {
padding: 20px 10px;
margin: 0;
background-color: #eeeeee;
}
a.selectButton {
text-decoration: none;
padding: 10px;
color: #888888;
background-color: #ffffff;
border: 1px solid #d0d0d0;
display: block;
width: 100%;
margin: 0;
}
a.selectButton i {
color: #d0d0d0;
float: right;
padding-right: 10px;
}
ul.selectList {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #d0d0d0;
width: 100%;
position: absolute;
}
ul.selectList li {
width: 100%;
padding: 10px 0 10px 10px;
display: block;
background-color: #ffffff;
}
ul.selectList li a {
display: block;
text-decoration: none;
color: #888888;
}
ul.selectList li:hover {
background-color: #d0d0d0;
}
div.selectorWrapper input {
margin: 0;
padding: 10px;
width: 100%;
border: 1px solid #d0d0d0;
border-top: none;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
div.selectorWrapper {
/*width:100%;*/
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 50%;
float: left;
}
div.selectorWrapper .button {
background-color: #808080;
color: #FFFFFF;
margin-top: 30px;
border-radius: 4px;
margin-bottom: 20px;
font-size: 30px;
box-shadow: 0px 3px 0px 0px #636161;
border: none;
font-family: 'Open Sans', sans-serif;
}
div.recuperar {
text-align: center;
padding: 20px;
}
div.recuperar a.recupera-link {
text-decoration: none;
color: #5faadb;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
}
.contenedorA {
position: relative;
}
@media only screen and (min-width: 768px) {
label {
display: block;
width: 30%;
float: left;
padding: 10px 0 0 15px;
text-align: left;
font-size: 0.9em;
}
div.banner {
border: none;
}
div.form {
background: #ffffff;
}
.contenedorA {
padding: 100px 50px 0 50px;
}
.contenedor {
width: 96%;
margin: 0 auto!important;
box-shadow: 0px 0px 10px 3px #f9f9f9;
margin-top: 50px;
}
div.selectorWrapper {
width: 80%;
margin: 20px auto;
}
div.selectorWrapper input,
div.selectorWrapper a.selectButton {
width: 70%;
float: right;
margin: 0 auto;
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 80%;
float: none;
position: relative;
}
ul.selectList {
position: relative;
margin-left: 420px;
margin-top: 44px;
}
div.selectorWrapper input {
border: 1px solid #d0d0d0;
}
div.recuperar {
padding-left: 100px;
}
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel='stylesheet' href='css/main.css' type="text/css">
<!--<link rel='stylesheet' href='css/normalize.css' type="text/css">-->
</head>
<body>
<header class='site-header'>
<h3><span>compara</span>online</h3>
</header>
<div class=contenedorA>
<div class="contenedor">
<div class="banner">
<h2>Cotiza tu Seguro Automotriz</h2>
<p>Resultados instantaneos!</p>
</div>
<div class="form clearfix">
<form method="post" action="">
<div class="selectorWrapper clearfix">
<label>Marca : </label>
<a class="selectButton" id="selection1" href="#">Marca<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li><a href="#">Hyundai</a></li>
<li><a href="#">Toyota</a></li>
<li><a href="#">Nissan</a></li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Modelo : </label>
<a class="selectButton" id="selection2" href="#">Modelo<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li><a href="#">Sedan</a></li>
<li><a href="#">SUV</a></li>
<li><a href="#">Pick-up</a></li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Anio: </label>
<a class="selectButton" id="selection3" href="#">Anio<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li><a href="#">2017</a></li>
<li><a href="#">2016</a></li>
<li><a href="#">2015</a></li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<!--<label>Email : </label>-->
<input type='email' name='email' class="clearfix" id='email' placeholder='Email' required>
</div>
<div class="selectorWrapper clearfix">
<input type='submit' class="button disableClick" id='submitBtn' value="Cotizar">
</div>
</form>
<div class="recuperar">
<a class="recupera-link" href="#">Recuperar cotizacion</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src='js/main.js' type="text/javascript"></script>
浮动元素时，会将其从文档的正常流中移除。结果，其他 block 元素不遵守它们的 space.
由于行中的两个元素（Modelo 和 Anio）都是 float: left，下一个块元素（电子邮件）看不到它们，并采用了它们的 space。所以电子邮件 div 现在隐藏在拆分元素下。
但是，电子邮件 div 中的 input 元素不是块元素。默认情况下，它是一个内联元素。内联元素尊重浮动元素的 space 。 （这就是文本能够环绕浮动图像的方式。）
因此在您的代码中，当电子邮件 div 移动到拆分元素下方（在 z 轴上）时，电子邮件 div 中的输入保持在拆分元素下方（在 y 轴上） -轴）。
当您在开发工具中突出显示电子邮件元素时，它说明了这种分为两行的情况。
一种解决方案是提供电子邮件 div display: inline-block 和 width: 100%。
div.selectorWrapper:nth-child(4) {
display: inline-block;
width: 100%;
}
另一个解决方案是将 clear: both 添加到电子邮件 div。 (Read more about clearing floats.)
div.selectorWrapper:nth-child(4) {
clear: both;
}
$(document).ready(function() {
$('.selectList').hide();
$('.selectorWrapper a').click(function() {
hideShow(this);
});
$('ul.selectList li').click(function() {
changeText(this);
validate();
});
$('#email').keydown(function() {
var correo = $('#email').val();
if (validateMail(correo)) {
$('#email').css('borderColor', '#87e466');
validate();
} else {
$('#email').css('borderColor', '#ca3535');
validate();
}
});
function validateMail(email) {
var re = /^(([^<>()\[\]\.,;:\s@"]+(\.[^<>()\[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
console.log(re.test(email));
return re.test(email);
}
function validate() {
var select1 = $('#selection1').text();
var select2 = $('#selection2').text();
var select3 = $('#selection3').val();
var email = $('#email').val();
if (select1 != 'Marca' && select2 != 'Modelo' && select3 != 'Anio' && validateMail(email)) {
$('#submitBtn').css({
'backgroundColor': '#bbd550',
'boxShadow': '0px 3px 0px 0px #9fbc2d'
});
$('#submitBtn').removeClass('disableClick');
} else {
$('#submitBtn').css({
'backgroundColor': '#808080',
'boxShadow': '0px 3px 0px 0px #636161'
});
$('#submitBtn').addClass('disableClick');
}
}
function hideShow(element) {
var thisId = $(element).attr('id');
var isHidden = $('#' + thisId).next().css('display');
console.log(isHidden);
if (isHidden == 'none') {
$('#' + thisId).next().slideDown();
} else {
$('#' + thisId).next().slideUp();
}
}
function changeText(element) {
var text = $(element).text();
$(element).parent().prev().text(text);
$(element).parent().prev().append('<i class="fa fa-chevron-down"></i>');
$(element).parent().slideUp();
$(element).parent().prev().css('borderColor', '#87e466')
}
});
div.selectorWrapper:nth-child(4) {
clear: both;
}
html {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input {
outline: none;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
.disableClick {
pointer-events: none;
}
label {
display: none;
}
h3,
h2 {
margin: 0 auto;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
header.site-header {
background-color: #000000;
width: 100%;
}
header.site-header h3 {
text-align: center;
color: #ffffff;
padding: 15px 0;
font-weight: normal;
font-size: 30px;
}
header.site-header h3 span {
font-weight: bold;
}
div.banner {
border-bottom: 5px solid #36aadd;
}
div.banner h2 {
font-size: 2em;
text-align: center;
font-weight: bold;
color: #36aadd;
padding: 15px 10px 10px 10px;
}
div.banner p {
color: #888888;
text-align: center;
margin: 0;
font-size: 1.2em;
padding-bottom: 50px;
font-family: 'Open Sans', sans-serif;
}
div.form {
padding: 20px 10px;
margin: 0;
background-color: #eeeeee;
}
a.selectButton {
text-decoration: none;
padding: 10px;
color: #888888;
background-color: #ffffff;
border: 1px solid #d0d0d0;
display: block;
width: 100%;
margin: 0;
}
a.selectButton i {
color: #d0d0d0;
float: right;
padding-right: 10px;
}
ul.selectList {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #d0d0d0;
width: 100%;
position: absolute;
}
ul.selectList li {
width: 100%;
padding: 10px 0 10px 10px;
display: block;
background-color: #ffffff;
}
ul.selectList li a {
display: block;
text-decoration: none;
color: #888888;
}
ul.selectList li:hover {
background-color: #d0d0d0;
}
div.selectorWrapper input {
margin: 0;
padding: 10px;
width: 100%;
border: 1px solid #d0d0d0;
border-top: none;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
div.selectorWrapper {
/*width:100%;*/
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 50%;
float: left;
}
div.selectorWrapper .button {
background-color: #808080;
color: #FFFFFF;
margin-top: 30px;
border-radius: 4px;
margin-bottom: 20px;
font-size: 30px;
box-shadow: 0px 3px 0px 0px #636161;
border: none;
font-family: 'Open Sans', sans-serif;
}
div.recuperar {
text-align: center;
padding: 20px;
}
div.recuperar a.recupera-link {
text-decoration: none;
color: #5faadb;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
}
.contenedorA {
position: relative;
}
@media only screen and (min-width: 768px) {
label {
display: block;
width: 30%;
float: left;
padding: 10px 0 0 15px;
text-align: left;
font-size: 0.9em;
}
div.banner {
border: none;
}
div.form {
background: #ffffff;
}
.contenedorA {
padding: 100px 50px 0 50px;
}
.contenedor {
width: 96%;
margin: 0 auto!important;
box-shadow: 0px 0px 10px 3px #f9f9f9;
margin-top: 50px;
}
div.selectorWrapper {
width: 80%;
margin: 20px auto;
}
div.selectorWrapper input,
div.selectorWrapper a.selectButton {
width: 70%;
float: right;
margin: 0 auto;
}
.selectorWrapper:nth-child(2),
.selectorWrapper:nth-child(3) {
width: 80%;
float: none;
position: relative;
}
ul.selectList {
position: relative;
margin-left: 420px;
margin-top: 44px;
}
div.selectorWrapper input {
border: 1px solid #d0d0d0;
}
div.recuperar {
padding-left: 100px;
}
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel='stylesheet' href='css/main.css' type="text/css">
<!--<link rel='stylesheet' href='css/normalize.css' type="text/css">-->
</head>
<body>
<header class='site-header'>
<h3><span>compara</span>online</h3>
</header>
<div class=contenedorA>
<div class="contenedor">
<div class="banner">
<h2>Cotiza tu Seguro Automotriz</h2>
<p>Resultados instantaneos!</p>
</div>
<div class="form clearfix">
<form method="post" action="">
<div class="selectorWrapper clearfix">
<label>Marca : </label>
<a class="selectButton" id="selection1" href="#">Marca<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li><a href="#">Hyundai</a></li>
<li><a href="#">Toyota</a></li>
<li><a href="#">Nissan</a></li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Modelo : </label>
<a class="selectButton" id="selection2" href="#">Modelo<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li><a href="#">Sedan</a></li>
<li><a href="#">SUV</a></li>
<li><a href="#">Pick-up</a></li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<label>Anio: </label>
<a class="selectButton" id="selection3" href="#">Anio<i class="fa fa-chevron-down"></i></a>
<ul class="selectList">
<li><a href="#">2017</a></li>
<li><a href="#">2016</a></li>
<li><a href="#">2015</a></li>
</ul>
</div>
<div class="selectorWrapper clearfix">
<!--<label>Email : </label>-->
<input type='email' name='email' class="clearfix" id='email' placeholder='Email' required>
</div>
<div class="selectorWrapper clearfix">
<input type='submit' class="button disableClick" id='submitBtn' value="Cotizar">
</div>
</form>
<div class="recuperar">
<a class="recupera-link" href="#">Recuperar cotizacion</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src='js/main.js' type="text/javascript"></script>
在您的问题中，您正在显示 div 的属性，请检查 div 内 a 标签的属性。 a 标签有 padding:10px;.
这是因为 a.selectButton 的内边距为 10px。您可以完全删除它，也可以只删除左边的填充来解决问题。
a.selectButton {
padding-left: 0;
}
在您的样式标签中插入以上代码以解决问题。