ウィンドウのサイズが変更された場合は、ここではその幅

Question

を得ていないspan要素はスクリーンショットです：

そして、ここのコードです：

.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を使用しています。

---

EDIT解決しよう

！私はinline-blockにspan要素を設定するだけでなく、それらに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