Почему элемент рвет верстку?

140

10 августа 2019, 20:20

Не могу понять, почему элемент div в котором находится стрелочка при ее отсутствии рвет верстку

Пример без стрелочки

.insert { 
  margin: 4px; 
  padding: 7px 10px 6px; 
  border: 0 none; 
  background: #ebebeb none repeat scroll 0 0; 
} 
 
.filed_input { 
  display: inline-block; 
  background: #ebebeb none repeat scroll 0 0; 
  height: 34px; 
} 
 
.arrow_label { 
  width: 30px; 
  height: 34px; 
} 
 
.arrow_label:before {} 
 
.arrow_label.on:before { 
  content: '▲'; 
} 
 
.container_field_input { 
  overflow: hidden; 
} 
 
.filed_input div { 
  display: inline-block; 
}

<div class="filed_input"> 
  <div class="input"> 
    <input type="text" class="insert" onclick="toggleDrop(ge('_arraw_label'));" /> 
  </div> 
  <div class="arrow_label" id="_arraw_label"></div> 
</div> 
<div class="filed_list"></div>

А если задаю стрелочку в псевдо элементе ::before то все норм

Пример со стрелочкой

.insert { 
  margin: 4px; 
  padding: 7px 10px 6px; 
  border: 0 none; 
  background: #ebebeb none repeat scroll 0 0; 
} 
 
.filed_input { 
  display: inline-block; 
  background: #ebebeb none repeat scroll 0 0; 
  height: 34px; 
} 
 
.arrow_label { 
  width: 30px; 
  height: 34px; 
} 
 
.arrow_label:before { 
  content: '▼'; 
} 
 
.arrow_label.on:before { 
  content: '▲'; 
} 
 
.container_field_input { 
  overflow: hidden; 
} 
 
.filed_input div { 
  display: inline-block; 
}

<div class="filed_input"> 
  <div class="input"> 
    <input type="text" class="insert" onclick="toggleDrop(ge('_arraw_label'));" /> 
  </div> 
  <div class="arrow_label" id="_arraw_label"></div> 
</div> 
<div class="filed_list"></div>

Посмотрел через firebug там почему то у arrow_label отступ, хотя я его не задавал.

Answer 1

Все потому, что у вас в блоке filed_input получается строчных 2 элемента, которые по умолчанию вертикально выровнены по baseline. Когда вы убираете значение content, т.е. стрелку из элемента ::before, высота этого элемента становится равной нулю, уровень baseline смешается и вы видите то, что видите.

Что делать:

.arrow_label:before {
  content: "";
  vertical-align: top;
}

Создание интернет-магазина спортивных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Подключение шрифтов к сайту

Подключил шрифт на сайт с разными начертаниями, 2 начертания подключил немного иначе и результат отображения немного удивил

143

jQuery

Проблема с JQuery Datepicker

Почему-то даты перескакивают на понедельник,а не остаются на своих местах

161

jQuery

Как скрыть меню при повторном клике jquery

Имеется вот такой псевдокод, при клике он показывает моё меню, но я хочу что бы при повторном он его опять скрывал, как это можно сделать?

164

Unity: кратчайший доступ к переменной класса

Сабж:

164