Все иконки стоят на своём месте. А первая иконка слетает и заголовок. Почему так происходит?
* {
border-radius: 0 !important;
}
.bg-orange {
background: #f4a442 !important;
}
.sizep {
width:280;
height: 60px;
}
.data {
position:relative;
width:196px;
height:60px;
}
.tur {
position:relative;
width:280px;
height:60px;
}
.btn {
width:138px;
height:60px
}
.formInput > label {
position: absolute;
left: 42px;
top: 12px;
z-index: 2;
text-transform: uppercase;
font-size: 11px;
line-height: 1.09;
color: #9b9b9b;
font-family: OpenSansSemiBold, sans-serif;
}
.formControl .formInputPlace {
padding-left: 50px;
}
.formInputPlace > * {
display: inline-block;
vertical-align: top;
margin-left:40px;
}
.formInput>.far {
z-index: auto;
top: 21px;
left: 14px;
line-height: 18px;
height: 20px;
width: 20px;
text-align: center;
font-size: 23px;
color: #059bce;
transition: top .3s;
-moz-transition: top .3s;
-webkit-transition: top .3s;
-o-transition: top .3s;
}
.formInput .far {
color: #c8ced1;
z-index: 8;
position: absolute;
left: 10px;
font-style: normal;
}
.formInputPlace p {
margin-left:30px;
margin-top:18px;
font-size: 17px;
transition: margin .3s;
line-height: inherit;
color: #333 !important;
font-family: "OpenSansRegular";
transition: font-size .3s;
-moz-transition: font-size .3s;
-webkit-transition: font-size .3s;
-o-transition: font-size .3s;
}
.search {
width:270px;
height: 60px;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-*.min.js"></script>
<link rel="stylesheet" type="text/css" href="struct.css">
<div class="container py-3">
<ul class="nav nav-tabs border-0">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Город вылета: <span class="font-weight-bold text-primary"></span></a>
</li>
<li class="nav-item bg-orange">
<a class="nav-link text-white bg-orange font-weight-bold" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Горячие туры <span class="badge badge-pill text-danger badge-light">-50%</span></a>
</li>
</ul>
<div class="tab-content "id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<form>
<div class="form-row">
<div class="form-control border-right-0 search">
<div class="formInput">
<label> Дата вылета </label>
<i class="far fa-calendar-alt"></i>
<div class="formInputPlace">
<p class="withoutKids">С 13.07.2018</p>
<span style="display: none;"></span>
</div>
</div>
</div>
<div class="form-control border-right-0 data">
<div class="formInput">
<label> Дата вылета </label>
<i class="far fa-calendar-alt"></i>
<div class="formInputPlace">
<p class="withoutKids">С 13.07.2018</p>
<span style="display: none;"></span>
</div>
</div>
</div>
<div class="form-control border-right-0 data">
<div class="formInput">
<label> Кол-во ночей </label>
<i class="far fa-moon"></i>
<div class="formInputPlace">
<p class="withoutKids">На 7-8 ночей</p>
<span style="display: none;"></span>
</div>
</div>
</div>
<div class="form-control border-right-0 tur">
<div class="formInput">
<label> Туристы </label>
<i class="far fa-moon"></i>
<div class="formInputPlace">
<p class="withoutKids">2 взрослых</p>
<span style="display: none;"></span>
</div>
</div>
</div>
<button type="submit" class="btn bg-orange font-weight-bold text-white">Искать</button>
</div>
</form>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Тут ещё что-то
</div>
</div>
</div>
По умолчанию .form-control
- position: static;
Необходимо добавить к .form-control
- position: relative;
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Нашел ресурс для тестирования https://reqresin/ Не получается сделать POST (Login_Successful)
Разрабатываю приложение xamarin, возникла необходимость при любых http-запросах просматривать headerы ответа и сохранять определенный header, если...