我有一个表单 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 中,联系人表单字段框向右拉伸(stretch)大约 120 像素太宽,在 Chrome/Chrome 中,同样,在 Chrome/Windows works 中,在 Explorer/Windows works 中。如何修复?
这里的 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 -->
最佳答案
从提供的代码来看,您似乎正在使用 Contact Form 7 插件。如果您缺少插件附带的一整 block CSS,那么以 100% 的信心回答是一项艰巨的任务.也就是说,与其使用 flex box 使表单居中,不如尝试使用旧的 margin:auto;
来解决对齐问题。
这是一个例子 Fiddle https://jsfiddle.net/t8xLqr4y/
因为我们没有完整的代码,所以我添加了一个包装 div 元素的示例。您可能会发现您有一个类为 .wpcf7 或 .wpcf7-form-control 或您可以使用的类似内容的 div。但基本上应用类似的东西:
.example {
margin: auto;
width: 400px;
}
老派 margin:auto;
为您做居中。宽度是必需的,但您也可以使用 max-width:400px;
使其灵活地适应较小的宽度。
要使输入字段和文本区域正常运行,您需要将它们设置为 100% 的宽度并将框大小设置为边框框。
.example input[type="text"],
.example input[type="email"],
.example textarea {
box-sizing: border-box;
width: 100%;
}
它们不需要是 100%,它们可以是您喜欢的任何宽度,但我假设您希望它们是环绕元素的整个宽度。当然,如果您只希望它们在窗口变窄时为全宽,您也可以使用最大宽度。
编辑 我发现我在这里没有提到媒体查询。以上所有内容都可以根据您的喜好包装在媒体查询中。无论您是否这样做,都不应该影响该方法。
关于html - @media 中的浏览器表单宽度兼容性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56308208/