Question

这是截图：

这是代码：

.contact_section .contact_form input[type="text"], .contact_section .contact_form input[type="email"]{
    border: 1px solid black;
    margin: 15px 0;
    font-size: 16px;
    padding: 3px 5px;
    text-align: center;
    width: 30.2%;

    display: inline;

    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.contact_section .right_box{
    float: right;
    width: 500px;
}

.contact_form .wpcf7-form-control-wrap:nth-of-type(2){
    margin: 0 5px;
}

@media screen and (max-width: 510px) {
    .contact_section .contact_form input[type="text"], .contact_section .contact_form input[type="email"]{
        margin: 5px auto;
        display: block;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .contact_form .wpcf7-form-control-wrap:nth-of-type(2) {
        margin: 0;
    }
}

问题在于，在正常的窗口大小下，它看起来很完美，如屏幕截图所示。但是如果调整窗口大小（小于510px）并返回到完整大小的窗口，email文本框将转到下一行！

这是截图：

我注意到的是，父<span>元素现在没有宽度！我一直试图弄清楚它为什么会发生这么多小时。但仍然没有成功！：（

顺便说一句，我正在使用ContactForm7作为联系表格。

修改

解决了！我将span元素设置为inline-block，并将30.2% width设置为它们而不是文本框。一些保证金调整解决了这个问题！谢谢

Answer 1

CSS属性display:inline不接受宽度和高度。将其更改为内联块以解决您的问题。

.contact_section .contact_form input[type="text"], .contact_section .contact_form input[type="email"]{
    border: 1px solid black;
    margin: 15px 0;
    font-size: 16px;
    padding: 3px 5px;
    text-align: center;
    width: 30.2%;

    display: inline-block;

    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

参考：display:inline resets height and width

调整窗口大小时，span元素不会达到其宽度

1 个答案: