0

Пытаюсь сверстать страничку, надо чтобы элементы формы были посередине. Все сделал, но забыл что в placeholder нужна иконка от FontAwesome. Сделал через :before, соответственно создав обертку, ибо к input не применяется. После этого все полшло поехало, если убираю для форм width:100%; то не растягивается на весь див, если ставлю 100%, то просто игнорирует columns gap. До создания обертки все было норм, даже ширину вручную не пришлось ставить. Скрины 1)как должно быть 2)первый вариант 3)второй вариант. Собственно что не так с кодом то? Может я в шары долблюсь и не вижу чего то. Help!!!

https://i.stack.imgur.com/Il4NC.png ====== https://i.stack.imgur.com/3XX5Z.png =======

/*FORM==================================*/
.form_request_a_quote {
	width: 100%;
	max-width: 92.735%;
	margin: 0 auto;
}

.form_request_a_quote>.form {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 0.75fr;
	grid-column-gap: 12px;
}

.kostil1 {
	
}

.form_request_a_quote>.form>.form1_full_name_div>input,
.form_request_a_quote>.form>.form1_email_div>input,
.form_request_a_quote>.form>.form1_phone_div>input,
.form_request_a_quote>.form>button {
	border-width: 0;
	text-decoration: none;
	outline: none;
	height: 50px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 13px;
	color:#b4b4b4;
	padding: 0;
	margin:0;
	border-radius: 3.5px;
	
}

.form_request_a_quote>.form>.form1_full_name_div>input,
.form_request_a_quote>.form>.form1_email_div>input,
.form_request_a_quote>.form>.form1_phone_div>input {
	padding:0px 20px;
	width: 100%;
}

.form_request_a_quote>.form>button {
	text-transform: uppercase;
	color:#fff;
	background-color: #ffbb42;
	transition: 0.22s;
}

.form_request_a_quote>.form>button:hover {
	color:#ffbb42;
	background-color: #fff;
}

.form1_full_name_div {
	position: relative;
}

.form1_full_name_div:before {
	content: "\f183";
	font-family: FontAwesome;
	color: gray;
	font-size:13.5px;
	text-align: left;
	position: absolute;
	left: 5px;
	top: 18px;
}
<div class="form_request_a_quote">
				
				<form action="#" class="form">
					
					<div class="form1_full_name_div" class="kostil1"><input type="text" class="form1_full_name" class="kostil1" placeholder="Full Name"></div>
					<div class="form1_email_div" class="kostil1"><input type="email" class="form1_email" class="kostil1" placeholder="E-Mail"></div>
					<div class="form1_phone_div" class="kostil1"><input type="text" class="form1_phone" class="kostil1" placeholder="Phone"></div>
					<button class="kostil1" class="form_request_a_quote_button">
						
						request a quote

					</button>
				</form>

			</div>

https://i.stack.imgur.com/TXwZj.png

4
  • grid-gap: 0 12px: так проверьте 5 апр 2020 в 15:52
  • то же самое :((
    – Dendislam
    5 апр 2020 в 15:54
  • а если просто .form написать ? 5 апр 2020 в 16:02
  • все равно то же. Непонятки короче. Суть в том что input вылезает за пределы div и игнорирует columns gap.Ну, как я понял, естественно.
    – Dendislam
    5 апр 2020 в 16:12

1 ответ 1

0

В общем, дело было в том что почему то к этим элементам не применялось box-sizing: border-box; из-за этого пэддинг расширял инпуты. Банально, но щито поделать.

*, 
*before, 
*after {
    box-sizing: border-box;
}

Прописано в самом начале, почему не применялось я до сих пор не знаю.

2
  • *:before, *:after . И это не нужно, потому как у них значение box-sizing идет inherit.
    – NeedH8
    5 апр 2020 в 17:46
  • Поздновато отвечаю, но спасибо <3
    – Dendislam
    16 апр 2020 в 13:25

Ваш ответ

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

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