Question

我有一个表单wpcf7，并且我使用了以下CSS将其和其他div放在页面中间的@media中。

@media(min-width: 768px) 
{.wpcf7- 
form-control.wpcf7-submit {
display: flex;
justify-content: center;
}}
@media (min-width: 768px)  
{.contact::before, .contact::after
{display: flex;
justify-content: center;
}}@media (min-width: 768px) 
{.wpcf7{display: flex;
justify-content: center;
}} @media (min-width: 768px) 
{#anr_captcha_field_1{display: 
flex;justify-content: center; }}

在Apple Safari中，联系表单字段框的宽度大约向右伸展120像素，在Chrome / Chrome中，相同，在Chrome / Windows中，在Explorer / Windows中。如何解决？

这里的html很大，因为它包含了几个部分的div，但这是一些：

<label> Your Name (required)<br />
<span class="wpcf7-form-control-wrap your-name"><input type="text" 
name="your-name" value="" size="40" class="wpcf7-form-control wpcf7- 
text wpcf7-validates-as-required" aria-required="true" aria- 
invalid="false" /></span> </label></p>
<p><label> Your Email (required)<br />
<span class="wpcf7-form-control-wrap your-email"><input type="email" 
name="your-email" value="" size="40" class="wpcf7-form-control 
wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates- 
as-email" aria-required="true" aria-invalid="false" /></span> 
</label></p>
<p><label> Subject<br />
<span class="wpcf7-form-control-wrap your-subject"><input 
type="text" name="your-subject" value="" size="40" class="wpcf7- 
form-control wpcf7-text" aria-invalid="false" /></span> </label></p>
<p><label> Your Message<br />
<span class="wpcf7-form-control-wrap your-message"><textarea 
name="your-message" cols="40" rows="10" class="wpcf7-form-control 
wpcf7-textarea" aria-invalid="false"></textarea></span> </label></p>
<p><div class="anr_captcha_field"><div id="anr_captcha_field_1" 
class="anr_captcha_field_div"></div></div><span class="wpcf7-form- 
control-wrap g-recaptcha-response"></span></p>
<p><input type="submit" value="Send" class="wpcf7-form-control 
wpcf7-submit" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form>. 
</div>
</div><!-- .entry-content -->

Answer 1

从提供的代码来看，您似乎正在使用Contact Form 7插件。如果您使用该插件，则会遗漏一大堆CSS，这是一个100％放心回答的艰巨任务。也就是说，为什么不尝试使用旧的margin:auto;来整理对齐方式，而不是使用flex box来使表单居中。

以下是小提琴https://jsfiddle.net/t8xLqr4y/

的示例

由于我们没有完整的代码，因此我添加了一个包装div元素的示例。您可能会发现您的div带有.wpcf7或.wpcf7-form-control或类似的类。但基本上应用类似的东西：

.example {
  margin: auto;
  width: 400px;
}

旧学校margin:auto;为您服务。宽度是必需的，但是您也可以使用max-width:400px;使其更灵活以适应较小的宽度。

要使输入字段和文本区域正常工作，您需要将其设置为100％的宽度，并将框大小设置为border-box。

.example input[type="text"], 
.example input[type="email"], 
.example textarea {
  box-sizing: border-box;
  width: 100%;
}

它们不必为100％，它们可以是您喜欢的任何宽度，但是我正在假设您希望它们成为包装元素的整个宽度。当然，如果只希望它们在窗口变窄时为全角，也可以使用最大宽度。

编辑我知道我在这里没有提到媒体查询。以上所有内容都可以根据您的喜好包装在媒体查询中。不管您是否这样做都不会影响该方法。

@media

1 个答案: