联系表格 7 的下拉菜单间距问题

Question

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

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

更新后的表格图片

Answer 1

确保添加这样的自定义 CSS（希望它有所帮助，因为我们缺少您的 CSS，所以无法判断发生了什么以及真正覆盖它的样式，但 span 默认情况下不是块元素，因此边距不会除非你定义display:block你的保证金会起作用）

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

Answer 2

创建一种样式或覆盖现有样式，即（wpcf7-form-control-wrap）。给它一个边距底部并使用 !important 覆盖现有空间。