由父容器剪切的HTML输入元素

Question

一张图片说千言万语：

您是否在左侧看到搜索框？父级隐藏了搜索框底部的一部分。对齐关闭，我无法弄清楚原因。这种效果在Chrome和Firefox中都很持久。

看看这个Chrome调试器快照：

因此父容器（蓝色）是三个相等宽度的div容器之一，跨越您正在查看的“标题”部分（也是div）。现在，我也尝试使用“display：table”以及使用实际的表格布局来解决这个以表格格式布局div的问题。这两个都导致了同样的问题，除了隐藏搜索框的看不见的部分，该框是完全可见的。尽管如此，它仍然与按钮保持不对齐。但它没有扩展父容器高度来容纳它，它浮出并悬停在属于下面主要内容框的小上边距上。

使用搜索框的边距无效，它不会让步。我还应该提到，这只发生在输入元素上。如果我切换到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;
}

任何人都可以提供任何见解或建议为什么会这样吗？

Answer 1

给“gallery-search-box”一个保证金值：

#gallery-search-box {
margin:10px;
}

Answer 2

试试这个：

.gallery-height {
  height: 55px;
  vertical-align: middle;
}

Answer 3

按钮似乎干扰了搜索输入字段，因为您在一个div中压缩了两个元素。你应该向左浮动并添加一个清晰的：这两个div作为第三个孩子：

HTML

<div id="gallery-controls-search" class="gallery-height">
    <div id="gallery-search-button"></div>
    <input id="gallery-search-box" placeholder="Search..." />
    <div class="clear"></div>
</div>

CSS

#gallery-search-button, #gallery-search-box {
    float:left;
}
.clear{
    clear:both;
}

试试;）

Answer 4

毕竟，我使用绝对定位工作，例如

position: relative;

...用于搜索框的父容器，并且：

position: absolute;
bottom: 0;

...用于搜索框。不管怎样，谢谢大家。