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

Question

在这个 Contact Form 7 表单中，选择字段下有一个 ~32px 的空白:业务年限和年收入。我想使用 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 默认情况下不是 block 元素，因此边距不会除非你定义 display:block 你的边距会起作用)

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