Картина говорит тысячу слов:HTML элемент ввода обрезаемый родительским контейнером
ли вы видите в окне поиска слева? Родитель скрывает часть нижней части окна поиска. Выравнивание выключено, и я не могу понять, почему. Эффект сохраняется как в Chrome, так и в Firefox.
Посмотрите на этот Chrome отладчик снимку:
Таким образом, родительский контейнер (синий) является одним из трех равных ширина Div контейнеров, охватывающих этот раздел «заголовок» вы смотрите на (который также является div). Теперь я также попытался решить эту задачу, разделив divs в формате таблицы, используя «display: table», а также используя фактический макет таблицы. Оба они приводят к одной и той же проблеме, за исключением того, что вместо скрытия невидимой части окна поиска окно полностью видимо. Тем не менее, он все еще не совпадает с кнопкой, пока он не оставлен. Но он не увеличивает высоту родительского контейнера для размещения, он всплывает и парит над маленьким верхним краем, принадлежащим основному содержимому.
Игра с краем окна поиска не имеет эффекта, она не сдвинется с места. Следует также упомянуть, что это происходит только с элементом ввода. Если я переключусь на текстовое поле, оно работает так, как должно, правильно выровнено (я не хочу просто использовать его, я не хочу многострочного текстового поля). Кроме того, в этом примере здесь я переношу первые два контейнера заголовка слева (контейнеры кнопок поиска и навигации), в то время как последний контейнер (с 1/35) справа имеет переполнение: скрытый, чтобы он заполнялся остальная доступная ширина (общий контейнер «header» также имеет переполнение: скрытый, чтобы заставить этот трюк работать). Вот код:
HTML:
<div id="gallery-controls" class="gallery-height">
<div id="gallery-controls-search" class="gallery-height">
<div id="gallery-search-button"></div>
<input id="gallery-search-box" placeholder="Search..." />
</div>
<div id="gallery-controls-navigation" class="gallery-height">
<div id="prev-gallery-button" class="gallery-navigation-button"></div>
<div id="next-gallery-button" class="gallery-navigation-button"></div>
</div>
<div id="gallery-controls-info" class="gallery-height">
<span id="navigation-position-info">1/35</span>
</div>
</div>
CSS:
#gallery-controls {
width: 100%;
margin: 8px 0px 0px 30px;
overflow: hidden;
}
.gallery-height {
height: 55px;
}
/**************** SEARCH ****************/
#gallery-controls-search {
float: left;
width: 33.33%;
text-align: left;
}
#gallery-search-button {
display: inline-block;
width: 55px;
height: 55px;
margin-right: 5px;
background: url(/static/images/search-button.png);
cursor: pointer;
}
#gallery-search-box {
display: inline-block;
font-family: "BebasNeueRegular";
font-size: 20px;
color: #DDDDDD;
outline: 0;
padding: 3px 10px 3px 10px;
background: #222222;
-webkit-box-shadow: 0px 2px 3px #666;
-moz-box-shadow: 0px 2px 3px #666;
box-shadow: 0px 2px 3px #666;
border-top: 1px solid rgba(0,0,0,0.1);
border-right: 1px solid rgba(0,0,0,0);
border-bottom: 1px solid rgba(0,0,0,0);
border-left: 1px solid rgba(0,0,0,0);
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
/**************** NAVIGATION ****************/
#gallery-controls-navigation {
float: left;
width: 33.33%;
text-align: center;
}
.gallery-navigation-button {
display: inline-block;
width: 55px;
height: 55px;
cursor: pointer;
}
#prev-gallery-button {
background: url(/static/images/prev-gallery-button.png);
margin-right: 10px;
}
#next-gallery-button {
background: url(/static/images/next-gallery-button.png);
}
/**************** INFO ****************/
#gallery-controls-info {
overflow: hidden;
position: relative;
}
#navigation-position-info {
position: absolute;
bottom: -8px;
right: 3px;
font-family: "Lane-Narrow";
font-size: 40px;
color: #FFFFFF;
text-shadow: 0px 2px 3px #222;
}
Может кто-нибудь предложить какие-либо понять или предложить, почему это происходит?
Можете ли вы предоставить скрипку или ссылку? –