表格落在div容器外面

Question

将表单放在有边框的div容器中，但表单似乎溢出容器。如何让div与表单一起成长？

.contact-form-cntr {
  width: 100%;
  border: 1px solid #00426B;
  border-radius: 3px;
  padding: 10px;
  margin-bottom: 20px;
}

.contact-form-cntr input {
  font-size: 14px;
  border: 1px solid #B8D7EA;
  border-radius: 3px;
  float: left;
  margin-right: 4px;
  padding: 4px;
}

.contact-form-cntr label {
  font-weight: 570;
  color: #595959;
  padding: 0;
  margin: 10px 0px 2px 0px;
  display: block;
}

<div class="contact-form-cntr">
  <form action="index.php">
    <label for="firstname">Please Enter Your Name</label>
    <input type="text" name="firstname" id="firstname" placeholder="First Name..." size=35>
    <input type="text" name="lastname" id="lastname" placeholder="Last Name..." size=35>
    <div style="clear:both"></div>
    <label for="emailaddress">Please Enter Your Email Address</label>
    <input type="text" name="emailaddress" id="emailaddress" placeholder="Valid Email Address.." size=70>
  </form>
</div>

Answer 1

只需将overflow: auto;添加到您的.contact-form-cntr规则中即可。这将允许div包含浮动的内容：

＆＃13;

＆＃13;

.contact-form-cntr {
  width: 100%;
  border: 1px solid #00426B;
  border-radius: 3px;
  padding: 10px;
  margin-bottom: 20px;
  overflow:auto;
}

.contact-form-cntr input {
  font-size: 14px;
  border: 1px solid #B8D7EA;
  border-radius: 3px;
  float: left;
  margin-right: 4px;
  padding: 4px;
}

.contact-form-cntr label {
  font-weight: 570;
  color: #595959;
  padding: 0;
  margin: 10px 0px 2px 0px;
  display: block;
}

＆＃13;

<div class="contact-form-cntr">
  <form action="index.php">
    <label for="firstname">Please Enter Your Name</label>
    <input type="text" name="firstname" id="firstname" placeholder="First Name..." size=35>
    <input type="text" name="lastname" id="lastname" placeholder="Last Name..." size=35>
    <div style="clear:both"></div>
    <label for="emailaddress">Please Enter Your Email Address</label>
    <input type="text" name="emailaddress" id="emailaddress" placeholder="Valid Email Address.." size=70>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;