用两列设计的 div 块内容构建表单。 div 中的内容没有填满 div 的全宽

Question

WordPress 5.4.1

如下图所示，一切正常，但现在不行了。我能想到自从我上次看到它正常工作以来发生的两件事； Wordpress 更新了，我搬到了 Cloudflare CDN。我不知道 CDN 是否会影响读取 .css 的方式，但我想我会提到它，以防它表明可能发生了什么。注意下图中它的两列，平均减半，每一列都完美地填充了 div。

现在，它是这样显示的：

当我检查页面时，您可以看到 div 的真实宽度和分隔 2 列的边距，但由于某种原因，它不再填充内容（参见上图）。另外，当我弄乱 div 宽度时，div 宽度确实增加了，但内容并没有变宽。

这是 HTML 表单：

<h3 class="form_title" style="text-decoration: underline;">Contact Details</h3> 
<div class="one-half">
<label> First Name *
[text* your-first-name] </label>
</div>
<div class="one-half last">
<label> Last Name *
[text* your-second-name] </label>
</div>

<div class="one-half">
<label> Your Email *
[email* your-email] </label>
</div>

<div class="one-half last">
<label> Contact Number *
[tel* your-tel] </label>
</div>

<h3 class="form_title" style="text-decoration: underline;">Company Details</h3> 

<div class="one-half">
<label> Business Name
[text your-business-name placeholder "Organisation or Business"] </label>
</div>

<div class="one-half last">
<label> Your position
[text your-position placeholder "e.g. Owner, Manager, Head of IT, etc"] </label>
</div>

<div style="text-align:left;width:48%;margin-right:4%;margin-bottom:20px;overflow:hidden;">
<label> Number of Staff
[select NumberofStaff placeholder "== select ==" "Just me!" "1-3" "3-5" "5-10" "10-20" "20- 
50" "50-100" "100+"]</label>
</div>

<div class="full-spread">
<label> Business Description
[textarea business-description placeholder "Please give a brief description of your 
business. This will help us with any functionality you may require on your site."]</label>
</div>

这是 CSS：

/* Contact Form 7 */

span.wpcf7-list-item { display: block; }

.one-half,
.one-third {
    position: relative;
    margin-right: 4%;
    float: left;
    margin-bottom: 20px;
    overflow:hidden;

}


.one-half { width: 48%; }
.one-third { width: 30.66%; }

.last {
    margin-right: 0 !important;
    clear: right;
}

.elementor-866 .elementor-element.elementor-element-5ab526a .eael-contact-form-7 .wpcf7- 
form-control.wpcf7-textarea {
    margin-bottom:-1%;
    padding-top:;
}

Answer 1

如果您将此代码添加到 css 将解决您的问题：

.elementor-866 .elementor-element.elementor-element-5ab526a .eael-contact-form-7 .wpcf7-form label{
width:100%!important;
}