时间戳

首页 > 解决方案 > 在 Elementor 中使用 Contact Form 7 但无法正确对齐文本框

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

问题描述

我试图在联系表格 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;
}

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

标签： csswordpresstextboxcontact-form-7elementor

解决方案

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

例如：

联系表格 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>

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

样式.css

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

推荐阅读