Warum kommen Eingabeobjekte außerhalb des div?

Question

Hinweis: Ich bin ein Super-Anfänger oder Amateur in CSS.

Ich habe ein CSS-Problem. Hier ist die html: -

<div class="obj-cont"> 
    <div class="lbl-cont"><label>Post Title :</label></div> 
    <div class="input-cont"><input type="text" name="title" id="title" value="" required/></div> 
</div> 

Hier ist die CSS: -

.form-container{border: 1px #ccc solid; border-radius: 5px; height: auto; padding: 10px; width: 70%; margin-left: 10%;} 
.obj-cont{padding: 5px; width: 300px; height:auto; border: 1px solid #000;} 
.lbl-cont{float:left; width: 80px} 
.input-cont{float:left; width: 80px} 

Das Ergebnis so kommt: -

Wie kann ich dieses Problem lösen?

Answer 1

Dies geschieht, weil die float auf dem .lbl-cont und .input-cont. Wenn Sie ein Element schweben, bricht es aus der Blockpositionierung aus.

können Sie den folgenden Code verwenden statt:

.form-container { 
 
    border: 1px #ccc solid; 
 
    border-radius: 5px; 
 
    height: auto; 
 
    padding: 10px; 
 
    width: 70%; 
 
    margin-left: 10%; 
 
} 
 
.obj-cont { 
 
    padding: 5px; 
 
    width: 300px; 
 
    height:auto; 
 
    border: 1px solid #000; 
 
} 
 
.lbl-cont { 
 
    display:inline-block; 
 
    width: 80px; 
 
} 
 
.input-cont { 
 
    display:inline-block; 
 
    width: 80px; 
 
}

<div class="obj-cont"> 
 
    <div class="lbl-cont"> 
 
    <label>Post Title :</label> 
 
    </div> 
 
    <div class="input-cont"> 
 
    <input type="text" name="title" id="title" value="" required/> 
 
    </div> 
 
</div>

Answer 2

Die und .input-con sind floated Elemente, so dass das übergeordnete Element (.obj-cont) gelöscht werden muss, um Höhe zu haben.

Der Code unten ist von https://css-tricks.com/snippets/css/clear-fix/:

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
    } 
.clearfix { display: inline-block; } 
/* start commented backslash hack \*/ 
* html .clearfix { height: 1%; } 
.clearfix { display: block; } 
/* close commented backslash hack */ 

die clearfix Klasse In der obj-cont.

<div class="obj-cont clearfix"> 
    <div class="lbl-cont"><label>Post Title :</label></div> 
    <div class="input-cont"><input type="text" name="title" id="title" value="" required/></div> 
</div> 

Answer 3

Man muss immer klar nach schweben. Bedeutet, müssen Sie <div style="clear:both"></div> nach den floated Elementen und innerhalb des enthaltenden Elements hinzufügen. In Ihrem Fall:

<div class="obj-cont clearfix"> 
    <div class="lbl-cont"><label>Post Title :</label></div> 
    <div class="input-cont"><input type="text" name="title" id="title" value="" required/></div> 
    <div style="clear:both"></div> 
</div>