调整窗口大小时，跨度元素没有得到它的宽度

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

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

截图如下：

我注意到，父 <span> 元素现在没有宽度！几个小时以来，我一直试图弄清楚它为什么会发生。但是还是没有成功！ :(

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

---

编辑

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

Answer 1

CSS 属性display:inline 不接受宽度和高度。将此更改为 inline-block 以解决您的问题。

.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