CSS Wordpress联系人表单定制

我有一个使用联系人表单7的联系人表单，它只有两个字段，一个电子邮件地址输入字段和一个提交按钮。它将被插入到我的网站上的几个位置，每个位置都有不同的宽度

我希望电子邮件地址和提交按钮位于同一行，并在两者之间留有空白。但是，我希望它们的大小能够填满插入的可用空间的100%

我的表单短代码是

[contact-form-7 id="5345" title="Quick Signup"]

表格的代码是

<div class="elementor-row">
[email* your-email][submit "Submit"] 
</div>

但是这会影响我所有的联系方式-form-7表单，而不仅仅是上面提到的表单，我如何使用这种样式只针对上面指定的表单

---

非常感谢您的帮助

将div标记添加到两个元素中，然后通过WordPress自定义面板将CSS应用到这些div是前进的方向

将不同div标签中的元素分开，并将它们放入contact form 7插件的form部分

然后在WordPress的定制面板中添加CSS代码

.elementor行{
浮动：左；
宽度：50%；/*使用百分比是良好的做法*/
}
.提交按钮{
浮动：对；
宽度：49%；/*根据您的保证金要求增加百分比*/
}

[电子邮件*您的电子邮件]
[提交“提交”]

将div标记添加到两个元素中，然后通过WordPress自定义面板将CSS应用到这些div是前进的方向

将不同div标签中的元素分开，并将它们放入contact form 7插件的form部分

然后在WordPress的定制面板中添加CSS代码

.elementor行{
浮动：左；
宽度：50%；/*使用百分比是良好的做法*/
}
.提交按钮{
浮动：对；
宽度：49%；/*根据您的保证金要求增加百分比*/
}

[电子邮件*您的电子邮件]
[提交“提交”]

在CSS中使用

id

而不是通用cf7类。您声明它是“5345”，但它可能是您应该在代码中使用浏览器工具检查的其他内容。在下面的代码中，我使用“5345”作为ID，但如果不同，请将其调整为您的真实ID：

#5345 input[type="email"]
 {
     width: 75%!important;
     margin-right:10px;
 }
#5345 input[type="submit"]
 {
     width: 25%!important;
 }

---

在CSS中使用

id

而不是通用cf7类。您声明它是“5345”，但它可能是您应该在代码中使用浏览器工具检查的其他内容。在下面的代码中，我使用“5345”作为ID，但如果不同，请将其调整为您的真实ID：

#5345 input[type="email"]
 {
     width: 75%!important;
     margin-right:10px;
 }
#5345 input[type="submit"]
 {
     width: 25%!important;
 }

---

他们有这方面的文档，请通读一遍，试一试，如果你无法实现，请用你尝试过的CSS和预期结果发布另一个问题。谢谢@JHeth这确实有用：）我已修改了我的问题很好，最后一部分将帮助人们解决你的问题，发布浏览器从class

elementor行获得的样式，我假设它的
width:100%；display:flex
如果您没有修改任何内容。是的，正如您假设的：）他们有文档，请通读一遍，试一试，如果您无法实现，请用您尝试过的CSS和预期结果发布另一个问题。谢谢@JHeth这确实有用：）我修改了我的问题很好，最后一部分将帮助人们解决您的问题，发布浏览器从class
elementor行获得的样式，我假设它是
width:100%；display:flex
如果您没有修改任何内容。是的，假设为：）