为什么输入对象超出div？

Question

注意：我是CSS的超级新手或业余爱好者。

我有一个CSS问题。这是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>

这是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}

结果是这样的： -

我该如何解决这个问题？

Answer 1

这是因为float和.lbl-cont上的.input-cont。如果浮动一个元素，它会突破块定位。

您可以改为使用以下代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

浮动后你总是要清除。 意味着，您必须在浮动元素之后和包含元素内添加<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>

Answer 3

.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 */

将clearfix类添加到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>