0

Не могу сдвинуть форму в это место. Надо сделать вот таквведите сюда описание изображения

Сейчас у меня таквведите сюда описание изображения

<footer>
  <div class="container clearfix">
      <nav class="footnav">
    <li>Home</li>
    <li>About</li>
    <li>Services</li>
    <li>Blog</li>
    <li>Contact us</li>
    </nav>
    <div class="contus">
      <h2>Contact us</h2>
    </div>
          <form>
          <div class="left">
          <label>Subject:</label>
          <input type="text"></input>
          </div>
          <div class="right">
          <label>Name:</label>
          <input type="text"></input>
          </div>
          <div class="bottom">
          <label>Your Message:</label>
          <input type="text"></input>
          </div>
         </form>
    <div class="ouradd">
      <h3>Our Addres</h3>
      <p>House No,11132, Sector 31, Gurgaon<br> 
       122001  India</p>
    </div>
      <div class="callus">
      <h3>CALL US</h3>
      <p>+ 91-9876543210<br>+ 01262219018</p>
      </div>
       <div class="emailus">
      <h3>email us</h3>
      <p>[email protected]</p>
       </div>
       </div>
  </footer>

footer {
  background-color: #3b404c;
  padding-top: 60px;
  margin-top: 60px;
  color: white;
}
footer nav {
  float: right;
  margin-bottom: 15px;
  display: inline;
  margin-right: 30px;
}
footer nav li {
  display: inline;
  margin-left: 15px;
}
footer h2 {
  font-size: 27px;
  text-transform: uppercase;
  padding-bottom: 90px;
}
footer h3 {
  text-transform: uppercase;
  font-size: 19px;
  padding-bottom: 15px;
}
footer .ouradd {
  padding-bottom: 40px;
}
footer .callus {
  padding-bottom: 40px;
}
footer .emailus {
  padding-bottom: 40px;
}

form {
  display: inline-block;
  padding-bottom: 14px;
}
form label {
  font-size: 20px;
  display: inline-block;
  padding-bottom: 10px;
}
form input {
  width: 200px;
  display: block;
  background: none;
  border: none;
  border-bottom: 1px solid #7a7b7f;
}
form input:focus {
  outline: none;
  border-bottom: 1px solid #00a5ff;
}
form .right {
  float: right;
  padding-right: 20px;
}
form .left {
  float: right;
}
form .bottom {
  margin-top: 114px;
}
form .bottom input {
  width: 420px;
  padding-top: 50px;
}

1 ответ 1

0

Самый наипростейщий способ, не передергивая уже имеющуюся верстку - добавить форме обтекание

form {
  float: right;
  padding-bottom: 14px;
}

display: inline-block убрал, так как при float любой элемент автоматически становится блочным.

1
  • Спасибо, уже разобрался))
    – robert
    31 мар 2016 в 7:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.