带有div块的构建表单-内容设计为两列。div中的内容未填满div的整个宽度

Question

Wordpress 5.4.1

这一切都工作得很好，如下图所示，但现在不是这样。我能想到自从我最后一次看到它正常工作后发生的两件事；Wordpress更新了，我转移到了Cloudflare CDN。我不知道CDN是否会影响.css的阅读方式，但我想我应该提到它，以防它给出可能发生的事情的迹象。请注意，在下面的图像中，它的两列被均匀地减半，每一列都完美地填写了div。

​

​

现在，这是它的显示方式：

​

​

当我检查页面时，你可以看到div的真实宽度和分隔两列的边距，但由于某种原因，它填充的内容不再(见前面的图像)。另外，当我摆弄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;
}