一张图说一千个字：
看到左边的搜索框了吗？父级隐藏了搜索框底部的一部分。对齐是关闭的，我不知道为什么。这种效果在 Chrome 和 Firefox 中都是持久的。
看看这个 Chrome 调试器快照：
因此，父容器（蓝色）是三个等宽的 div 容器之一，跨越您正在查看的“标题”部分（这也是一个 div）。现在，我还尝试使用“display: table”以及使用实际的表格布局来解决这个以表格格式布置 div 的问题。这两种方法都会导致相同的问题，只是搜索框不是隐藏不可见的部分，而是完全可见。它仍然与它左边的按钮不对齐。但它不会扩展父容器的高度以适应它，它会浮出并悬停在属于下面主要内容框的小顶部边距上。
玩搜索框的边缘没有效果，它不会让步。我还应该提到，这只发生在输入元素上。如果我切换到文本区域，它会正常工作，正确对齐（我不愿意只使用一个，我不想要多行文本框）。此外，在此示例中，我从左侧浮动前两个“标题”容器（搜索和导航按钮容器），而右侧的最后一个容器（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;
}
谁能提供任何见解或建议为什么会发生这种情况？