的 Basic concepts of flexbox

Question

我刚刚为我的网站创建了一个mailchimp表单，并希望更改设计。但是在电子邮件输入和按钮之间是一个小小的空白空间。我已经用css代码玩了很多但是我不能自己修复它。我认为这不是一个很大的改变，但我不能纠正它。

你能帮助我删除这个空间让我知道，我的代码中的问题在哪里？

谢谢，克里斯

＆＃13;

#mce-EMAIL {
  display: inline-block;
  padding: 8px 0;
  width: 70%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1em;
  color: #343434;
  padding: .7em 9em .7em 2em;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 0;
  background-color: rgb(240, 240, 240);
  background-image: none;
  background-repeat: repeat;
  background-attachment: scroll;
  background-clip: border-box;
  background-origin: padding-box;
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: auto auto;
  font-family: "Arial" inherit;
  color: #737373;
  letter-spacing: 1px;
  text-indent: 5%;
  border-radius: 5px 0 0 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 5px;
  opacity: 0.9;
  border-style: solid;
  border: none;
}


/* Input Styles */

.button {
  clear: both;
  display: inline-block;
  width: 25%;
  letter-spacing: .03em;
  padding: .7em 2em;
  border: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 0;
  height: 46px;
  background: #fc2;
  font-family: "Arial" inherit;
  font-weight: bold;
  color: inherit;
  letter-spacing: 1px;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background .3s ease-in-out;
}


/* Button Styles */

#mc-embedded-subscribe {
  display: inline-block;
  width: 20%;
  margin: 0;
  padding: 0;
}

#mc_embed_signup .mc-field-group input {
  /*display: block;*/
  /*width: 100%;*/
  /*padding: 8px 0;*/
  text-indent: 2%;
  width: 200px;
}

#mc_embed_signup input.mce_inline_error {
  border-color: #6B0505;
}

#mc_embed_signup input {
  border: 0px solid #999;
  -webkit-appearance: none;
}

#mc_embed_signup .mc-field-group label {
  display: block;
  margin-bottom: 3px;
}

＆＃13;

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
  <form action="//utz-benkel.us10.list-manage.com/subscribe/post?u=9684bbce9ec8413a5614ca7c3&amp;id=116fd11541" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
      <div class="mc-field-group">
        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="NAME@EXAMPLE.COM">
        <input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
      </div>
      <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
      </div>
      <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
      <div style="position: absolute; left: -5000px;"><input type="text" name="b_9684bbce9ec8413a5614ca7c3_116fd11541" tabindex="-1" value=""></div>
      <div class="clear text-center"></div>
    </div>
  </form>
</div>
<!--End mc_embed_signup-->

＆＃13;

Answer 1

我认为最佳解决方案是display: flex。没有更多的额外css ..它删除空格并使两个输入高度相等。

的 Basic concepts of flexbox

.mc-field-group { display: flex; }

＆＃13;
＆＃13;
.mc-field-group { display: flex; } #mce-EMAIL { display: inline-block; padding: 8px 0; width: 70%; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1em; color: #343434; padding: .7em 9em .7em 2em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin: 0; background-color: rgb(240, 240, 240); background-image: none; background-repeat: repeat; background-attachment: scroll; background-clip: border-box; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-size: auto auto; font-family: "Arial" inherit; color: #737373; letter-spacing: 1px; text-indent: 5%; border-radius: 5px 0 0 5px; border-top-left-radius: 5px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 5px; opacity: 0.9; border-style:solid; border: none; } /* Input Styles */ .button { clear: both; display: inline-block; width: 25%; letter-spacing: .03em; padding: .7em 2em; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin: 0; height: 46px; background: #fc2; font-family: "Arial" inherit; font-weight: bold; color: inherit; letter-spacing: 1px; border-radius: 0 5px 5px 0; cursor: pointer; transition: background .3s ease-in-out; } /* Button Styles */ #mc-embedded-subscribe{ display: inline-block; width: 20%; margin: 0; padding: 0; } #mc_embed_signup .mc-field-group input { /*display: block;*/ /*width: 100%;*/ /*padding: 8px 0;*/ text-indent: 2%; width: 200px; } #mc_embed_signup input.mce_inline_error { border-color: #6B0505; } #mc_embed_signup input { border: 0px solid #999; -webkit-appearance: none; } #mc_embed_signup .mc-field-group label { display: block; margin-bottom: 3px; }
＆＃13;
 <div id="mc_embed_signup"> <form action="//utz-benkel.us10.list-manage.com/subscribe/post?u=9684bbce9ec8413a5614ca7c3&id=116fd11541" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div id="mc_embed_signup_scroll"> <div class="mc-field-group"> <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="NAME@EXAMPLE.COM"> <input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button"> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div>  <div style="position: absolute; left: -5000px;"><input type="text" name="b_9684bbce9ec8413a5614ca7c3_116fd11541" tabindex="-1" value=""></div> <div class="clear text-center"></div> </div> </form> </div> 
＆＃13;
＆＃13;
＆＃13;

Answer 2

这是因为浏览器将行项目称为文本中的单词。在单词之间，有必要设置一个单词间隔。

只需在输入之间添加注释，以便它们之间没有空格或换行符。

＆＃13;

#mce-EMAIL { 
  display: inline-block;
  padding: 8px 0;
  width: 70%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
  font-size: 1em; 
  color: #343434; 
  padding: .7em 9em .7em 2em; 
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px; 
  border-radius: 3px; 
  margin: 0;
    background-color: rgb(240, 240, 240);
    background-image: none;
    background-repeat: repeat;
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto auto;
font-family: "Arial" inherit;

color: #737373;
letter-spacing: 1px;
text-indent: 5%;
border-radius: 5px 0 0 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 5px;
opacity: 0.9;
  border-style:solid;
  border: none;
} /* Input Styles */


.button { 
  clear: both;
  display: inline-block;
width: 25%;
  letter-spacing: .03em; 
  padding: .7em 2em; 
  border: none; 
  -webkit-border-radius: 3px; 
  -moz-border-radius: 3px; 
  border-radius: 3px; 
  margin: 0; 
  
  height: 46px;
  background: #fc2;
  font-family: "Arial" inherit;
  font-weight: bold;
  color: inherit;
  letter-spacing: 1px;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background .3s ease-in-out;
} /* Button Styles */



#mc-embedded-subscribe{
    display: inline-block;
    width: 20%;
    margin: 0;
    padding: 0;
}

#mc_embed_signup .mc-field-group input {
	/*display: block;*/
	/*width: 100%;*/
	/*padding: 8px 0;*/
	text-indent: 2%;
  width: 200px;
}
#mc_embed_signup input.mce_inline_error {
	border-color: #6B0505;
}
#mc_embed_signup input {
	border: 0px solid #999;
	-webkit-appearance: none;
}
#mc_embed_signup .mc-field-group label {
	display: block;
	margin-bottom: 3px;
  

}

＆＃13;

<!-- Begin MailChimp Signup Form -->
                <div id="mc_embed_signup">
                <form action="//utz-benkel.us10.list-manage.com/subscribe/post?u=9684bbce9ec8413a5614ca7c3&amp;id=116fd11541" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                    <div id="mc_embed_signup_scroll">
                <div class="mc-field-group">
              
                    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="NAME@EXAMPLE.COM"><!--
--><input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
                </div>
                    <div id="mce-responses" class="clear">
                        <div class="response" id="mce-error-response" style="display:none"></div>
                        <div class="response" id="mce-success-response" style="display:none"></div>
                    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                    <div style="position: absolute; left: -5000px;"><input type="text" name="b_9684bbce9ec8413a5614ca7c3_116fd11541" tabindex="-1" value=""></div>
                    <div class="clear text-center"></div>
                    </div>
                </form>
                </div>
                <!--End mc_embed_signup-->

＆＃13;

Answer 3

问题是两个元素之间的空白区域。 input元素是inline元素，它们之间的空格显示为单个空格。有几种方法可以解决它，你甚至可以使用其他答案中建议的不同设计，但是你可以通过简单地删除两个元素之间的所有空白来解决当前设计中的问题，如下所示：

#mce-EMAIL {
  display: inline-block;
  padding: 8px 0;
  width: 70%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1em;
  color: #343434;
  padding: .7em 9em .7em 2em;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 0;
  background-color: rgb(240, 240, 240);
  background-image: none;
  background-repeat: repeat;
  background-attachment: scroll;
  background-clip: border-box;
  background-origin: padding-box;
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: auto auto;
  font-family: "Arial" inherit;
  color: #737373;
  letter-spacing: 1px;
  text-indent: 5%;
  border-radius: 5px 0 0 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 5px;
  opacity: 0.9;
  border-style: solid;
  border: none;
}


/* Input Styles */

.button {
  clear: both;
  display: inline-block;
  width: 25%;
  letter-spacing: .03em;
  padding: .7em 2em;
  border: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 0;
  height: 46px;
  background: #fc2;
  font-family: "Arial" inherit;
  font-weight: bold;
  color: inherit;
  letter-spacing: 1px;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background .3s ease-in-out;
}


/* Button Styles */

#mc-embedded-subscribe {
  display: inline-block;
  width: 20%;
  margin: 0;
  padding: 0;
}

#mc_embed_signup .mc-field-group input {
  /*display: block;*/
  /*width: 100%;*/
  /*padding: 8px 0;*/
  text-indent: 2%;
  width: 200px;
}

#mc_embed_signup input.mce_inline_error {
  border-color: #6B0505;
}

#mc_embed_signup input {
  border: 0px solid #999;
  -webkit-appearance: none;
}

#mc_embed_signup .mc-field-group label {
  display: block;
  margin-bottom: 3px;
}

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
  <form action="//utz-benkel.us10.list-manage.com/subscribe/post?u=9684bbce9ec8413a5614ca7c3&amp;id=116fd11541" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
      <div class="mc-field-group">

        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="NAME@EXAMPLE.COM"><input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
      </div>
      <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
      </div>
      <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
      <div style="position: absolute; left: -5000px;"><input type="text" name="b_9684bbce9ec8413a5614ca7c3_116fd11541" tabindex="-1" value=""></div>
      <div class="clear text-center"></div>
    </div>
  </form>
</div>
<!--End mc_embed_signup-->

虽然这是一个简单的解决方案，但在一条长线上有很多元素并不是很优雅。要拆分该行，您可以使用一个忽略标记内部空白区域的HTML功能，因此只需在标记内部拆分：

<div class="mc-field-group">
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="NAME@EXAMPLE.COM"
    ><input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>

或者像这样：

<div class="mc-field-group">
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="NAME@EXAMPLE.COM"><
    input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>

或者您可以将空格转换为这样的评论：

<div class="mc-field-group">
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="NAME@EXAMPLE.COM"><!--
    --><input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>

请注意，大多数编辑在重新格式化HTML时可能会破坏这些解决方案，因此请避免重新格式化或之后重新应用修补程序。

Answer 4

如果没有实际复制和运行代码，您实际上无法为任何人提供足够的数据。

但我建议您在Firefox中加载Web开发人员并使用检查器先点击按钮。

然后你可以看到底部或左边的html元素。在那里你可以添加margin-left：-10px或margin-right：-10px或margin-too：-10px或margin-bottom：-10px并使用这些数字直到它看起来像你想要的那样。

在CSS中，它可能看起来像这样：

#mc-embedded-subscribe {margin-top: -10px;}

使用此功能，您只能将输入按钮作为目标，并在其与其上方的字段之间移除10px。

祝你好运。enter code here

两个没有空间的输入

4 个答案:

的 Basic concepts of flexbox