应用的CSS出现在文本区域的底部。如何隐藏它？

Question

我正在Wordpress中使用Contact Form 7插件添加表单。在表单中使用textarea时遇到问题；我的标签样式为background-color: #0090bc;。但是，它也在文本区域下方显示。

HOWARD的前端代码希望对您有所帮助

<p><label>Aim of Website<br>
<span class="wpcf7-form-control-wrap your-website-goal-1"><textarea name="your-website-goal-1" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="e.g. 'I just need a website so that I can link people to it through social media'..."></textarea></span></label></p>

我试过将它包装在div中并设置CSS

.full-spread textarea{
width: 100%;
height: 100%;
float: left;
position:relative;
}

尽管这从技术上解决了这个问题，但我遇到了另一个问题，那就是该div下面的下一个元素之间没有缝隙-我也无法弄清楚如何解决该新问题。

但是，这不能解决我的问题，因此您可以忽略它。

这是我的代码以支持屏幕截图：

<label>Aim of Website[textarea your-website-goal-1 placeholder "e.g. 'I just need a website 
so that I can link people to it through social media'..."]</label>
</div>


<label>Websites you've seen online that you like
[textarea influenced-website-1 placeholder "e.g. ''www.thiswebsite.com' - I like how this website details everything on one page'..."]</label>
<div>

我的标签标签是此CSS的目标：

.wpcf7-form label {
    text-align:center;
    color: white;
    padding-top: 5px;
    background-color: #0090bc;
    border-radius: 4px 4px 0px 0px;
}

Answer 1

通过添加margin-bottom:-1%;定位此文本区域，它会删除显示在文本区域下方的标签标签的多余位

<span class="wpcf7-form-control-wrap your-website-goal-1"><textarea name="your-website-goal-1" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="e.g. 'I just need a website so that I can link people to it through social media'..."></textarea></span>