Dieser output verwirrt mich

Question

Kurzbeschreibung: Ich ziehe den Code aus, das ist nicht mein Originalcode, aber mit diesem Code kann ich das Problem neu erstellen, ich dachte, ich werde in der Lage sein, das Problem zu lösen und am Ende Ich tat, Lösung macht Sinn, aber es verwirrt mich auch, bedeutet, warum ich es benutzen muss.

Edit1- Beschreibung -Die Sache ist, wenn ihr zwei Label und Eingabefeld sind in derselben Zeile sind, aber wie ich bald, wie ich einer der div-Label und Eingabe löschen sind an verschiedenen linee, sollte sie als nicht passiert div Breite ist 50%

Bitte lesen Sie die Qoute vor HTML-Code, und Sie werden in der Lage sein, das Problem zu verstehen, erklären es ein bisschen schwierig.

in HTML-Code, nur ich habe drei div in Form, entfernen Sie einfach eine der div und führen Sie den Code Sie verstehen, warum ich darüber verwirrt bin.

ich in der Lage war, das Problem zu lösen, indem Breite meiner div class Form zu geben, das ist in Ordnung, aber ich bin verwirrt, warum ich es zu tun haben, Dank

* { 
 
    font-size: 20px; 
 
} 
 

 
.wrapper { 
 
    width: 80%; 
 
    background: grey; 
 
    display: flex; 
 
} 
 

 
.form form { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
} 
 

 
form div { 
 
    width: 50%; 
 
    box-sizing: border-box; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    min-width: 40%; 
 
    text-align: right; 
 
    box-sizing: border-box; 
 
} 
 

 
input { 
 
    min-width: 45%; 
 
    box-sizing: border-box; 
 
}

<div class="wrapper"> 
 

 
    <div class="form"> 
 

 
    <form> 
 

 
     <div> 
 
     <label>Name</label> 
 
     <input type="text"> 
 
     </div> 
 

 
     <div> 
 
     <label>Username</label> 
 
     <input type="text"> 
 
     </div> 
 

 
     <div> 
 
     <label>password</label> 
 
     <input type="password"> 
 
     </div> 
 

 
    </form> 
 
    </div> 
 

 
</div>

Answer 1

Die Unterhalb von CSS werden alle Divs in die selbe Zeile gesetzt, auch wenn Sie eines der div label/inputs löschen.

Für form div, hinzugefügt display: inline-flex, padding: 2px; und für input, hinzugefügt margin-left: 4px;. Hoffe, das ist was du willst.

form div { 
    width: 50%; 
    box-sizing: border-box; 
    display: inline-flex; 
    padding: 2px; 
} 

input { 
    min-width: 45%; 
    box-sizing: border-box; 
    margin-left: 4px; 
}