入力オブジェクトがdivの外に出てくるのはなぜですか？

Question

注：私はCSSの超初心者またはアマチュアです。

私にはCSSの問題があります。ここで

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

CSSは次のとおりです。 - - ：ここにHTMLがある

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

結果は次のように来ている： -

がどのように私はこの問題を解決することができますか？

Answer 1

これは.lbl-contと.input-cont上の理由floatが起きています。要素を浮動させると、要素がブロック位置から外れます。

あなたが代わりに以下のコードを使用することができます。

.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

.lbl-contおよび.input-conは浮動小数点型の要素なので、親要素（.obj-cont）をクリアする必要があります。

以下のコードは、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 */ 

-続きをobjにclearfixクラスを追加します。

<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

あなたは常に浮動後にクリアする必要があります。 浮動小数点数の後ろおよび包含する要素の内側に<div style="clear:both"></div>を追加する必要があります。 あなたの場合：

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