0

input[type=search] {
  background: #fff url('/images/sprite/search.png') no-repeat 9px center;
  padding: 9px 10px 10px 25px;
  -webkit-border-radius: 10em;
  -moz-border-radius: 10em;
  border-radius: 10em;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
  float: left;
  width: 17%;
  margin-left: 10%;
  font-family: $lato;
  font-style: italic;
  font-size: 14px;
  text-align: center;
  display: block;
}
 input[type=search]:focus {
   border-color: #6dcff6;
  -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
  -moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
  box-shadow: 0 0 5px rgba(109,207,246,.5);
}

.destination-places-menu{
	float: right;
	width: 50%;
	margin-right: 15%;
	
}
.destination-places{
	font-family: $lato;
	font-size: $font-size-sixteen;
	color: $light-grey;
	
}
<div class="destination-search">
	<form >
    	<input placeholder="Search destination" type="search">
	  </form>
	</div>
	<div class="destination-places-menu">
	  <a href="#" class="destination-places">All place/</a>
	  <a href="#" class="destination-places">Recomended place</a>
	</div>

Привет! Через раз получается расположить два блока в одной строке - и вот этот случай, как раз тогда, когда не получается. помогите, пожалуйста, застряла на этом и сойти с места не могу

1
  • у вас два блока и так в одной строке, в чем проблема? 14 мар 2017 в 8:32

1 ответ 1

0

Оборачиваешь два блока которые должны быть в одну линию одним родительским, и родительскому блоку присваиваешь свойство display: flex; Если интересно, можешь почитать про Flexbox;

input[type=search] {
  background: #fff url('/images/sprite/search.png') no-repeat 9px center;
  padding: 9px 10px 10px 25px;
  -webkit-border-radius: 10em;
  -moz-border-radius: 10em;
  border-radius: 10em;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
  font-family: $lato;
  font-style: italic;
  font-size: 14px;
  text-align: center;
  display: block;
}

input[type=search]:focus {
  border-color: #6dcff6;
  -webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
  -moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
  box-shadow: 0 0 5px rgba(109, 207, 246, .5);
}

.destination-places-menu {
  margin-left: 15%;
}

.destination-places {
  font-family: $lato;
  font-size: $font-size-sixteen;
  color: $light-grey;
}

.row {
  display: flex;
  align-items: center; /* центрирование по вертикали */
}
<div class="row">
  <div class="destination-search">
    <form>
      <input placeholder="Search destination" type="search">
    </form>
  </div>
  <div class="destination-places-menu">
    <a href="#" class="destination-places">All place/</a>
    <a href="#" class="destination-places">Recomended place</a>
  </div>
</div>

3
  • а обязательно через flex ? других не бывает технологий ?
    – user33274
    14 мар 2017 в 5:26
  • это самый простой, а вообще есть куча вариантов как центрировать элементы, те же relative - absolute, или translate X-Y
    – Vein
    14 мар 2017 в 5:29
  • если изменить doctype на 1.1 то можно вместо flex и margin auto и прочих танцев просто поместить через тег center , это не проще ?
    – user33274
    14 мар 2017 в 5:34

Ваш ответ

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

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