Как сделать так, чтобы поля ввода с текстом выравнивались как на фото? Заранее спасибо
.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>
Я использовал флексы надеюсь вы не против этого..
.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>
Для input
задайте фиксированную ширину, к примеру: width: 250px
.
И для блока <div>
, в котором содержится текст и поле ввода задайте свойство text-align: right;
Необходимо было добавить:
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>
.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>
Как-то так с флексом. Некоторые мелочи думаю не составит труда доработать.
П.С. При прсомтре нажать на всю страницу.
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Виртуальный выделенный сервер (VDS) становится отличным выбором
На странице есть блок с видео и текстовым контентом справа от негоКак сделать так, чтобы у текстового контента был только вертикальный скролл...
Нужно разместить несколько элементов на холстеДелаю через цикл, всё должно работать по-моему, но ничего на холсте не отображается
При использовании js из консоли, насколько понимаю, с помощью опций
Есть вот такой скрипт для вывода крутёлки 360 в полный экран, он работает, но есть несколько проблем