WP - 联系表格 7 - 输入和按钮彼此相邻答案

【问题标题】：WP - Contact form 7 - Input & Btn next to each otherWP - 联系表格 7 - 输入和按钮彼此相邻
【发布时间】：2022-01-28 02:07:49
【问题描述】：

这是我正在开发的网站：http://www.whatsahoy.com/

我的问题：我想要按钮旁边的输入字段。如果我向左添加一个浮点数，它会彼此相邻，但带有一个奇怪的<br>。然后整个事情也在左边。我希望它在中间。

有人可以帮帮我吗？！非常感谢！芭芭拉

【问题讨论】：

标签： wordpress css-float contact-form-7

【解决方案1】：

为了为您提供最佳解决方案，查看表单的源代码会很有帮助。 <br> 可能在某处。但是，这是我根据我所看到的回复。如果没有帮助，我建议您更新您的问题。

将以下样式添加到您的自定义 CSS 将使字段和按钮彼此相邻，直到屏幕宽度达到 767 像素。

.wpcf7-form p {
    display: inline-block;
    width: 470px;
    max-width: 95%;
}

.wpcf7-form p br {
    display: none;
}

如果您希望它们在较小的屏幕上彼此相邻，您可以更改框架的宽度。这会根据您的主题设置在 767px 上发生变化。我不确定这不会对您网站的其他地方产生不良影响，但您可以尝试。

@media only screen and ( max-width: 767px ) {
    .et_pb_row {
        width: 600px;
    }
}

但是，从 600 像素开始，它会在屏幕上被削弱。将文本字段缩小可能会更好...

@media only screen and ( max-width: 600px ) {
    .wpcf7 input {
        max-width: 50%;
    }
}

您可能想稍微微调一下，但我希望您明白这一点。 GL！

【讨论】：

太棒了。非常感谢！这适用于宽度超过 767 像素的屏幕；一切都很好，但在较小的设备上，表格不在中间。只是稍微偏离。知道为什么吗？
也许...如果它是 5% 的折扣，但我没有看到... 470px 大致是文本字段 + 按钮 + 中间空格的宽度。它将隐藏的 ajax 加载器推到它下面。最大 95% 的宽度确保它不会变得比周围的可用空间更宽。想法是确保它不会触及屏幕边框，但无论如何都不会发生这种情况，因此您可以将其设置为 100%。

【解决方案2】：

.wpcf7-form-control-wrap {
display: inline-block !important;
     margin: -8px;
}
form.wpcf7-form.init.mailchimp-ext-0\.5\.55 {
    
    display: flex !important;
    justify-content: center !important;
}
input.wpcf7-form-control.has-spinner.wpcf7-submit {
    border-radius:0px !important;
    width: 30%;
}

@media only screen and (min-width: 50px) and (max-width: 600px)  {

div#wpcf7-f698-p10-o1 {
    width: 130%;
}

@media only screen and (min-width: 50px) and (max-width: 600px)  {

input.wpcf7-form-control.wpcf7-text.wpcf7-email.wpcf7-validates-as-required.wpcf7-validates-as-email {
    width: 235px;
    }
    form.wpcf7-form.init.mailchimp-ext-0\.5\.55 {
    display: flex !important;
    
 padding-right: 70px;
}}

【讨论】：