Форма выпадает за пределы контейнера div - PullRequest
0 голосов
/ 06 июня 2018

Помещение формы в ограниченный контейнер 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>

1 Ответ

0 голосов
/ 06 июня 2018

Просто добавьте overflow: auto; к своим .contact-form-cntr правилам.Это позволит div охватывать плавающий контент:

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...