0
被修剪
一張圖片勝過千言萬語：HTML input元素的父容器
你看到左邊的搜索框？父級隱藏搜索框底部的一部分。對齊關閉了，我不知道爲什麼。效果在Chrome和Firefox中都是持久的。
看看這個瀏覽器的調試器的快照：
所以父容器（藍色）是三個相同寬度的div容器跨越的一個，你看「頭」部分（這也是一個div）。現在，我也嘗試使用「display：table」以表格格式解決這個問題，並使用實際的表格佈局。這兩個都會導致相同的問題，除了隱藏搜索框未看到的部分外，該框完全可見。儘管如此，它仍然與按鈕不一致。但它不會擴展父容器高度以適應它，它會浮動並懸停在屬於下面主要內容框的小型頂部邊距上。
使用搜索框的邊距不起作用，它不會改變。我還應該提到，這隻會發生在輸入元素上。如果我切換到textarea，它的工作方式應該是正確的（我不願意只使用一個，我不想要多行文本框）。另外，在這裏的例子中，我將左邊的兩個「標題」容器（搜索和導航按鈕容器）漂浮，而右邊的最後一個容器（具有1/35）溢出：隱藏以填充它其餘的可用寬度（整個「標題」容器也有溢出：隱藏起來使這個技巧工作）。下面的代碼：
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;
}
任何人都可以提供任何見解或建議爲什麼發生這種情況？
你能提供一個小提琴或鏈接？ –