Выравнивание HTML CSS

168
21 октября 2018, 20:10

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

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

Answer 1

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

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

Answer 2

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

Answer 3

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

  • фиксированную ширину лейбла 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>

Answer 4

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

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

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

READ ALSO
сделать скролинг блока по вертикали
CSS

сделать скролинг блока по вертикали

На странице есть блок с видео и текстовым контентом справа от негоКак сделать так, чтобы у текстового контента был только вертикальный скролл...

 141
Ошибка с выводом элементов canvas
javascript

Ошибка с выводом элементов canvas

Нужно разместить несколько элементов на холстеДелаю через цикл, всё должно работать по-моему, но ничего на холсте не отображается

 142
SpiderMonkey Garbage collection, блокирующий режим
javascript

SpiderMonkey Garbage collection, блокирующий режим

При использовании js из консоли, насколько понимаю, с помощью опций

 127
Проблемы с кнопкой (JS+CSS+IMG), не меняется стиль!
javascript

Проблемы с кнопкой (JS+CSS+IMG), не меняется стиль!

Есть вот такой скрипт для вывода крутёлки 360 в полный экран, он работает, но есть несколько проблем

 147