通过下拉菜单间距联系表单7问题

Question

在此联系表格7表格中，选择字段下的差距大约为32个：商业年限和年度收入。我想使用CSS均匀地分隔字段，但是我在选择字段下无法处理这个间隙，然后均匀地分隔所有字段。请参阅下面附带的图片和源代码，并建议如何解决问题。谢谢你的帮助。

＆＃13;

＆＃13;

<form action="/sandbox/pipeline/overview/?preview_id=31&#038;preview_nonce=b4447e0d19&#038;_thumbnail_id=-1&#038;preview=true#wpcf7-f11144-p31-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="11144" />
<input type="hidden" name="_wpcf7_version" value="5.0.1" />
<input type="hidden" name="_wpcf7_locale" value="en_US" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f11144-p31-o1" />
<input type="hidden" name="_wpcf7_container_post" value="31" />
</div>
<p><span class="wpcf7-form-control-wrap full-name"><input type="text" name="full-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Full Name*" /></span><br />
<span class="wpcf7-form-control-wrap email"><input type="email" name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="Email*" /></span><br />
<span class="wpcf7-form-control-wrap phone"><input type="tel" name="phone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" aria-required="true" aria-invalid="false" placeholder="Phone*" /></span><br />
<span class="wpcf7-form-control-wrap zipcode"><input type="text" name="zipcode" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Zip Code*" /></span><br />
<span class="wpcf7-form-control-wrap company"><input type="text" name="company" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Company Name*" /></span><br />
<span class="wpcf7-form-control-wrap salespeople"><input type="text" name="salespeople" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Number of Salespeople*" /></span><br />
<span class="wpcf7-form-control-wrap revenue"><select name="revenue" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="">Annual Revenue*</option><option value="$1 Million - $5 Million">$1 Million - $5 Million</option><option value="$5 Million - $20 Million">$5 Million - $20 Million</option><option value="$20 Million and Above">$20 Million and Above</option></select></span><br />
<span class="wpcf7-form-control-wrap years"><select name="years" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"><option value="">Years in Business*</option><option value="0-4 Years">0-4 Years</option><option value="5-10 Years">5-10 Years</option><option value="10+ Years">10+ Years</option></select></span><br />
<span class="wpcf7-form-control-wrap message"><textarea name="message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="Message"></textarea></span><br />
<input type="submit" value="CONTACT US" class="wpcf7-form-control wpcf7-submit" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form>

＆＃13;

＆＃13;

＆＃13;

更新的表格图片

Answer 1

创建样式或覆盖现有样式，即（wpcf7-form-control-wrap）。给它一个保证金底部并使用！important来覆盖现有空间。

Answer 2

确保添加这样的自定义CSS（希望它有所帮助，因为我们错过了你的CSS所以不能告诉我们发生了什么以及什么样的风格真的覆盖了它，但是span不是一个块元素默认情况下，除非您定义display:block您的保证金将起作用，否则保证金不会影响该点

.wpcf7-form-control-wrap {
    margin-bottom:10px!important;
    display:block!important;
}