Выровняйте входы и текстовое поле по меткам по вертикали - PullRequest
0 голосов
/ 27 октября 2018

Я хочу создать эту форму в css

enter image description here

HTML

<div class="contact__right">
  <form action="" class="contact__form">
    <div>
      <label for="name" class="contact__form-label">Name</label>
      <input type="text" id="name" class="contact__form-input">
    </div>
    <div>
      <label for="email" class="contact__form-label">Email</label>
      <input type="text" id="email" class="contact__form-input">
    </div>
    <div>
      <label for="phone" class="contact__form-label">Phone</label>
      <input type="text" id="phone" class="contact__form-input">
    </div>
    <div>
      <label for="message" class="contact__form-label">Message</label>
      <textarea name="message" id="message" cols="30" rows="10" class="contact__form-textarea"></textarea>
    </div>
  </form>
</div>

CSS

.contact {
  &__form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 105px 95px;
    color: $white;
  }
  &__form-input,
  &__form-textarea {
    width: 300px;
    height: 40px;
    background: transparent;
    border: 1px solid white;
    border-radius: 2px;
    margin-bottom: 25px;
  }
  &__form-textarea {
    height: 150px;
  }
  &__form-label {
    padding-right: 70px;
  }
}

С чем я борюсь, это выравнивание входов с метками и textarea на одной линии по вертикали.textarea всегда торчит из-за того, что label имеет более длинный текст, чем остальные.

Вся помощь будет оценена.

Ответы [ 4 ]

0 голосов
/ 27 октября 2018

Я бы не использовал flexbox для формы, но для каждого <div> внутри формы.Метки расположены по центру по вертикали для каждого поля ввода, за исключением текстовой области.Там метка вертикально выровнена сверху.При желании вы можете играть с верхним отступом.

* {
  box-sizing: border-box;
}

.contact__right {
  background-color: gray;
}

.contact__form {
  padding: 105px 95px;
  width: 100%;
  color: white;
}

.contact__form>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}

.contact__form-input,
.contact__form-textarea {
  width: 300px;
  height: 40px;
  background: transparent;
  border: 1px solid white;
  border-radius: 2px;
}

.contact__form-textarea {
  height: 150px;
}

label[for="message"].contact__form-label {
  align-self: flex-start;
}
<div class="contact__right">
  <form action="" class="contact__form">
    <div>
      <label for="name" class="contact__form-label">Name</label>
      <input type="text" id="name" class="contact__form-input">
    </div>
    <div>
      <label for="email" class="contact__form-label">Email</label>
      <input type="text" id="email" class="contact__form-input">
    </div>
    <div>
      <label for="phone" class="contact__form-label">Phone</label>
      <input type="text" id="phone" class="contact__form-input">
    </div>
    <div>
      <label for="message" class="contact__form-label">Message</label>
      <textarea name="message" id="message" cols="30" rows="10" class="contact__form-textarea"></textarea>
    </div>
  </form>
</div>
0 голосов
/ 27 октября 2018

Добавьте следующий код CSS, и ваша проблема будет решена.

.contact__form-label {
vertical-align: top;}
0 голосов
/ 27 октября 2018

Добавьте это правило CSS для label:

label {
  width: 100px;
  display: inline-block;
  vertical-align: top;
}

(в противном случае метка будет обрабатываться как встроенный элемент. Таким образом, вы дадите ей фиксированную ширину и выровняете ее по верху)

Если вам не нравится выравнивание на самом верху, вы можете добавить padding-top ike в следующий фрагмент:

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 105px 95px;
  color: $white;
}

input,
textarea {
  width: 300px;
  height: 40px;
  background: transparent;
  border: 1px solid white;
  border-radius: 2px;
  margin-bottom: 25px;
}

textarea {
  height: 150px;
}

label {
  width: 100px;
  display: inline-block;
  vertical-align: top;
  padding-top: 14px;
}
.contact__right {
background: #ccc;
}
<div class="contact__right">
  <form action="" class="contact__form">
    <div>
      <label for="name" class="contact__form-label">Name</label>
      <input type="text" id="name" class="contact__form-input">
    </div>
    <div>
      <label for="email" class="contact__form-label">Email</label>
      <input type="text" id="email" class="contact__form-input">
    </div>
    <div>
      <label for="phone" class="contact__form-label">Phone</label>
      <input type="text" id="phone" class="contact__form-input">
    </div>
    <div>
      <label for="message" class="contact__form-label">Message</label>
      <textarea name="message" id="message" cols="30" rows="10" class="contact__form-textarea"></textarea>
    </div>
  </form>
</div>
´
0 голосов
/ 27 октября 2018

Думаю, тебе придется сделать это вручную.Обычно веб-сайты стремятся разбить строку после меток и перенести поля ввода на следующую строку.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...