2

Как сделать так, чтобы поля ввода с текстом выравнивались как на фото? Заранее спасибо

.fa-times {
  padding: 20px 20px 0 0;
  text-align: right;
  float: right;
  cursor: pointer;
}

.modal-container {
  width: 100%;
  height: 100vh;
  align-items: center;
  display: flex;
  background-color: rgba(0, 0, 0, .7);
  position: absolute;
  z-index: 1000;
}

#modal_ad {
  margin: 0 auto;
  border: 2px solid #080808;
  border-radius: 20px;
  background-color: #f2f2f2;
  text-align: center;
  font-weight: bold;
  width: 70%;
  font-size: 16px;
}

form {
  margin: 50px 0 50px 0;
}

#modal_ad form div {
  padding-top: 10px;
}

#modal_ad form div input {
  height: 30px;
  width: 70%;
  margin: 0 auto;
  outline: none;
}

#modal_ad form div textarea {
  width: 70%;
  margin: 0 auto;
  height: 70px;
  margin-bottom: 20px;
  outline: none;
}

#modal_ad form button {
  width: 30%;
  margin: 0 auto;
  height: 50px;
  background-color: #ffc500;
  border: none;
  font-weight: bold;
  text-transform: uppercase;
  outline: none;
  cursor: pointer;
}
<div class="modal-container">
  <div id="modal_ad">
    <i class="fas fa-times"></i>
    <form action="mail.php" method="POST" enctype="multipart/form-data">
      <legend>Если вы знаете об интересном событии, сообщите нам!</legend>
      <div>
        <label for="city">Город</label>
        <input type="text" id="city" name="city" placeholder="Например, Сочи">
      </div>
      <div>
        <label for="name">Событие</label>
        <input type="text" id="name" name="name" placeholder="Например, Фестиваль мёда">
      </div>
      <div>
        <label for="date">Дата, время</label>
        <input type="text" id="date" name="date" placeholder="Например, 15-20 января 2019г. с 10:00 до 22:30">
      </div>
      <div>
        <label for="site">Оф. сайт</label>
        <input type="text" id="site" name="site" placeholder="Например, flating.info (не обязательно)">
      </div>
      <div>
        <label for="social">Страница в соц. сети</label>
        <input type="text" id="social" name="social" placeholder="Например, vk.com/raiszzz1 (Любая соц. сеть)">
      </div>
      <div>
        <label for="user_name">Ваше имя</label>
        <input type="text" id="user_name" name="user_name" placeholder="Например, Дмитрий">
      </div>
      <div>
        <label for="user_phone">Ваш телефон</label>
        <input type="text" id="user_name" name="user_phone" placeholder="Например, 8 999 100 10 10">
      </div>
      <div>
        <label for="user">Кто Вы</label>
        <input type="text" id="user" name="user" placeholder="Например, Организатор">
      </div>
      <button type="submit">Отправить</button>
    </form>
  </div>
</div>

4 ответа 4

7

Я использовал флексы надеюсь вы не против этого..

.fa-times{
	padding: 20px 20px 0 0;
	text-align: right;
	float: right;
	cursor: pointer;
}
.modal-container{
	width: 150%;
	
	align-items: center;
	display: flex;
	background-color: rgba(0,0,0,.7);
	position: absolute;
	z-index: 1000;
}
#modal_ad{
	margin: 0 auto;
	border: 2px solid #080808;
	border-radius: 20px;
	background-color: #f2f2f2;
	text-align: center;
	font-weight: bold;
	width: 70%;
	font-size: 16px;
}
form {
	margin: 50px 0 50px 0;
}
#modal_ad form div{
	padding-top: 10px;
  display:flex;
}
#modal_ad form div input{
	height: 30px;
	width: 60%;
	margin-left:30px;
  margin-right:20px;
	outline: none;
}
#modal_ad form div textarea{
	width: 70%;
	margin: 0 auto;
	height: 70px;
	margin-bottom: 20px;
	outline: none;
}
#modal_ad form button{
	width: 30%;
	height: 50px;
	border: none;
	font-weight: bold;
	text-transform: uppercase;
	outline: none;
	cursor: pointer;
  margin-top:20px;
  border-radius:20px;
}
label {
  margin-left:auto;
   
}
<div class="modal-container">
  <div id="modal_ad">
    <i class="fas fa-times"></i>
    <form action="mail.php" method="POST" enctype="multipart/form-data">
      <legend>Если вы знаете об интересном событии, сообщите нам!</legend>
      <div>
        <label for="city">Город</label>
        <input type="text" id="city" name="city" placeholder="Например, Сочи">
      </div>
      <div>
        <label for="name">Событие</label>
        <input type="text" id="name" name="name" placeholder="Например, Фестиваль мёда">
      </div>
      <div>
        <label for="date">Дата, время</label>
        <input type="text" id="date" name="date" placeholder="Например, 15-20 января 2019г. с 10:00 до 22:30">
      </div>
      <div>
        <label for="site">Оф. сайт</label>
        <input type="text" id="site" name="site" placeholder="Например, flating.info (не обязательно)">
      </div>
      <div>
        <label for="social">Страница в соц. сети</label>
        <input type="text" id="social" name="social" placeholder="Например, vk.com/raiszzz1 (Любая соц. сеть)">
      </div>
      <div>
        <label for="user_name">Ваше имя</label>
        <input type="text" id="user_name" name="user_name" placeholder="Например, Дмитрий">
      </div>
      <div>
        <label for="user_phone">Ваш телефон</label>
        <input type="text" id="user_name" name="user_phone" placeholder="Например, 8 999 100 10 10">
      </div>
      <div>
        <label for="user">Кто Вы</label>
        <input type="text" id="user" name="user" placeholder="Например, Организатор">
      </div>
      <button type="submit">Отправить</button>
    </form>
  </div>
</div>

2
  • Название поля и само поле должны стоять близко друг к другу 8 авг 2018 в 9:10
  • @ПавелРумянцев изменил пожете посмотреть
    – Randall
    8 авг 2018 в 9:16
2

Для input задайте фиксированную ширину, к примеру: width: 250px.
И для блока <div>, в котором содержится текст и поле ввода задайте свойство text-align: right;

2
  • Помогло, спасибо, только я теперь не могу понять как выровнять все по центру? 8 авг 2018 в 9:12
  • 1
    задайте форме максимальную ширину max-width и добавьте свойство margin: 0 auto 8 авг 2018 в 9:13
2

Необходимо было добавить:

  • фиксированную ширину лейбла width: 180px;
  • сделать элемент блочно-строчным display: inline-block;
  • выравнять текст по какому-либо из краев text-align: left;

legend {
    text-align: center;
}
label {
    display: inline-block;
    text-align: left;
    width: 180px;
}
.fa-times{
	padding: 20px 20px 0 0;
	text-align: right;
	float: right;
	cursor: pointer;
}
.modal-container{
	width: 100%;
	height: 100vh;
	align-items: center;
	display: flex;
	background-color: rgba(0,0,0,.7);
	position: absolute;
	z-index: 1000;
}
#modal_ad{
	margin: 0 auto;
	border: 2px solid #080808;
	border-radius: 20px;
	background-color: #f2f2f2;
	font-weight: bold;
	width: 70%;
	font-size: 16px;
}
form {
	margin: 50px 0 50px 0;
}
#modal_ad form div{
	padding-top: 10px;
}
#modal_ad form div input{
	height: 30px;
	width: 70%;
	margin: 0 auto;
	outline: none;
}
#modal_ad form div textarea{
	width: 70%;
	margin: 0 auto;
	height: 70px;
	margin-bottom: 20px;
	outline: none;
}
#modal_ad form button{
	width: 30%;
	margin: 0 auto;
	height: 50px;
	background-color: #ffc500;
	border: none;
	font-weight: bold;
	text-transform: uppercase;
	outline: none;
	cursor: pointer;
}
<div class="modal-container">
  <div id="modal_ad">
    <i class="fas fa-times"></i>
    <form action="mail.php" method="POST" enctype="multipart/form-data">
      <legend>Если вы знаете об интересном событии, сообщите нам!</legend>
      <div>
        <label for="city">Город</label>
        <input type="text" id="city" name="city" placeholder="Например, Сочи">
      </div>
      <div>
        <label for="name">Событие</label>
        <input style="padding-left: 15px;" type="text" id="name" name="name" placeholder="Например, Фестиваль мёда">
      </div>
      <div>
        <label for="date">Дата, время</label>
        <input style="padding-left: 15px;" type="text" id="date" name="date" placeholder="Например, 15-20 января 2019г. с 10:00 до 22:30">
      </div>
      <div>
        <label for="site">Оф. сайт</label>
        <input style="padding-left: 15px;" type="text" id="site" name="site" placeholder="Например, flating.info (не обязательно)">
      </div>
      <div>
        <label for="social">Страница в соц. сети</label>
        <input style="padding-left: 15px;" type="text" id="social" name="social" placeholder="Например, vk.com/raiszzz1 (Любая соц. сеть)">
      </div>
      <div>
        <label for="user_name">Ваше имя</label>
        <input style="padding-left: 15px;" type="text" id="user_name" name="user_name" placeholder="Например, Дмитрий">
      </div>
      <div>
        <label for="user_phone">Ваш телефон</label>
        <input style="padding-left: 15px;" type="text" id="user_name" name="user_phone" placeholder="Например, 8 999 100 10 10">
      </div>
      <div>
        <label for="user">Кто Вы</label>
        <input style="padding-left: 15px;" type="text" id="user" name="user" placeholder="Например, Организатор">
      </div>
      <button type="submit">Отправить</button>
    </form>
  </div>
</div>

2

.fa-times{
	padding: 20px 20px 0 0;
	text-align: right;
	float: right;
	cursor: pointer;
}
.modal-container{
	width: 100%;
	height: 100vh;
	align-items: center;
	display: flex;
	background-color: rgba(0,0,0,.7);
	position: absolute;
	z-index: 1000;
}
#modal_ad{
	margin: 0 auto;
	border: 2px solid #080808;
	border-radius: 20px;
	background-color: #f2f2f2;
	text-align: center;
	font-weight: bold;
	width: 70%;
    font-size: 16px;
    display: flex;
    flex-direction: row;
}
form {
	margin: 50px auto;
    display: flex;
    flex-direction: column;
}
#modal_ad form div{
	padding-top: 10px;
    display: flex;
    justify-content: flex-end;
}
#modal_ad form div input{
    justify-content: flex-end;
    height: 30px;
    width: 250px;
    outline: none;
    margin-left: 20px;
}
#modal_ad form div textarea{
	width: 70%;
	margin: 0 auto;
	height: 70px;
	margin-bottom: 20px;
	outline: none;
}
#modal_ad form button{
	width: 30%;
	margin: 0 auto;
	height: 50px;
	background-color: #ffc500;
	border: none;
	font-weight: bold;
	text-transform: uppercase;
	outline: none;
	cursor: pointer;
}

label {
align-self: center;
}
 <div class="modal-container">
        <div id="modal_ad">
          <i class="fas fa-times"></i>
          <form action="mail.php" method="POST" enctype="multipart/form-data">
            <legend>Если вы знаете об интересном событии, сообщите нам!</legend>
            <div>
              <label for="city">Город</label>
              <input type="text" id="city" name="city" placeholder="Например, Сочи">
            </div>
            <div>
              <label for="name">Событие</label>
              <input type="text" id="name" name="name" placeholder="Например, Фестиваль мёда">
            </div>
            <div>
              <label for="date">Дата, время</label>
              <input type="text" id="date" name="date" placeholder="Например, 15-20 января 2019г. с 10:00 до 22:30">
            </div>
            <div>
              <label for="site">Оф. сайт</label>
              <input type="text" id="site" name="site" placeholder="Например, flating.info (не обязательно)">
            </div>
            <div>
              <label for="social">Страница в соц. сети</label>
              <input type="text" id="social" name="social" placeholder="Например, vk.com/raiszzz1 (Любая соц. сеть)">
            </div>
            <div>
              <label for="user_name">Ваше имя</label>
              <input type="text" id="user_name" name="user_name" placeholder="Например, Дмитрий">
            </div>
            <div>
              <label for="user_phone">Ваш телефон</label>
              <input type="text" id="user_name" name="user_phone" placeholder="Например, 8 999 100 10 10">
            </div>
            <div>
              <label for="user">Кто Вы</label>
              <input type="text" id="user" name="user" placeholder="Например, Организатор">
            </div>
            <button type="submit">Отправить</button>
          </form>
        </div>
      </div>

Как-то так с флексом. Некоторые мелочи думаю не составит труда доработать.

П.С. При прсомтре нажать на всю страницу.

Ваш ответ

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

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