在Elementor中使用Contact Form 7但无法正确对齐文本框

Posted 2021-04-20

当我在每个文本框上设置宽度样式时，我尝试将我的文本框与联系人表单7对齐，并且发生了一些奇怪的事情。 “Text1”和“Text2”使用与“Text3”和“Text4”相同的样式css。

他们都跟着我，我将contact0的宽度设置为50％。但为什么这两种形式表现不同？

https://i.imgur.com/dR5t8TI.png 联系表格7

<div>
    <form id="contact0">
[email* eml  placeholder "Text1"]
[text phn  placeholder "Text2"]
    </form>
</div>
<div>
    <form id="contact0">
[email* eml  placeholder "Text3"]
[text phn  placeholder "Text4"]
    </form>
</div><div>
    <form id="contact1">
[email* eml  placeholder "Text5"]
[text phn  placeholder "Text6"]
    </form>
</div>

CSS

CSS
#contact0{
    width: 48%;
    float: left;
}
#contact1{
    width: 48%;
    float: right;
}

非常感谢您回答我的问题。

答案

我强烈建议您在表单中设置元素样式而不是像您一样创建三个表单。

例如：

联系表格7

 <div class="contact-form-style">
 <p class="style1">[text* text placeholder "Name*"]</p>
 <p class="style2">[email* email placeholder "Email*"]</p>
 <p class="style2">[textarea* textarea placeholder "Textt*"]</p>
 [submit "Submit"]
 </div>

然后尝试以这种方式设置样式：

style.css文件

 .contact-form-style {
 /* your CSS */
 }
 .style1 {
 /* your CSS */
 }
.style2 {
 /* your CSS */
 }