html - 表单落在 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 包含 float 内容:

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

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