为什么输入占用2个空格？

Question

我的输入有问题。

如您所见，我的输入占用了太多空间。它没有边距或内边距。

这是我的代码（我使用的是 Boilerplate v5.3.0）。

我怎样才能修复它，让它只占用它需要的空间？

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

Answer 1

当您浮动一个元素时，您会将其从文档的正常流程中移除。结果，其他 block 元素不尊重它们的空间。

由于行上的两个元素（Modelo 和 Anio）都是 float: left，因此下一个块元素（Email）看不到它们，并占据了它们的空间。因此，电子邮件 div 现在隐藏在拆分元素下。

但是，电子邮件 div 中的 input 元素不是块元素。默认情况下，它是一个内联元素。并且内联元素尊重浮动元素的空间。 （这就是文本能够环绕浮动图像的方式。）

因此，在您的代码中，当电子邮件 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>

Answer 2

在您的问题中，您正在显示 div 的属性，请检查 div 内 a 标记的属性。 a 标签具有 padding:10px;。

Answer 3

发生这种情况是因为 a.selectButton 具有 10 像素的内边距。您可以将其完全删除，也可以仅删除左侧填充来解决问题。

a.selectButton {
  padding-left: 0;
}

在你的样式标签中插入上面的代码来解决这个问题。