WP - Contact form 7 - Input 和 Button 彼此相邻

Question

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

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

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

Answer 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;
    }
}

但是，从 600px 开始，它将在屏幕上残废。将文本字段缩小可能会更好...

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

您可能想稍微调整一下，但我希望您能理解。 GL!

Answer 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;
}}

WP - Contact form 7 - Input 和 Button 彼此相邻

WP - Contact form 7 - Input & Btn next to each other

wordpress

css-float

contact-form-7