Wenn Fenstergröße verändert wird, span-Element nicht immer seine Breite

Question

Hier ist der Screenshot:

Und hier ist der Code:

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

Das Problem ist, dass bei normaler Fenstergröße, es perfekt aussieht wie im Screenshot gezeigt. Wenn Sie jedoch die Größe des Fensters ändern (auf weniger als 510 px) und zurück zum Fenster voller Größe, springt das Textfeld email in die nächste Zeile.

Hier ist der Screenshot:

Was bemerkte ich, ist, dass, müssen die Eltern <span> Element jetzt nicht eine Breite haben! Ich habe seit vielen Stunden versucht herauszufinden, warum das passiert. Aber immer noch kein Erfolg! :(

Btw, bin mit ContactForm7 für das Kontaktformular.

---

EDIT

GELÖST! Stelle ich die span Elemente inline-block sowie die 30.2%width ihnen setzen statt Die Textfelder und einige Randeinstellungen haben das Problem behoben! Danke

Answer 1

Die CSS-Eigenschaft display:inline akzeptiert keine Breiten und Höhen. Ändern Sie dies in Inline-Block, um Ihre Probleme zu lösen.

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

Referenz: display:inline resets height and width