HTML 输入元素被父容器剪裁

Question

一张图说一千个字:

您看到左侧的搜索框了吗？父项隐藏了搜索框底部的一部分。对齐已关闭，我不明白为什么。该效果在 Chrome 和 Firefox 中都存在。

看看这个 Chrome 调试器快照:

所以父容器(蓝色)是三个等宽的 div 容器之一，跨越您正在查看的“标题”部分(这也是一个 div)。现在，我还尝试使用“显示:表格”以及使用实际的表格布局来解决以表格格式布置 div 的问题。这两种方法都会导致相同的问题，除了不是隐藏搜索框的不可见部分，而是该框是完全可见的。它仍然与左边的按钮不对齐。但它不会扩展父容器的高度来容纳它，它会浮出并悬停在属于下方主要内容框的小上边距上。

调整搜索框的边距没有任何效果，它不会移动。我还应该提到，这只发生在输入元素上。如果我切换到文本区域，它会正常工作，正确对齐(我不愿意只使用一个，我不想要多行文本框)。此外，在此处的示例中，我将左侧的前两个“标题”容器(搜索和导航按钮容器) float ，而右侧的最后一个容器(1/35)已溢出:隐藏以使其填充可用宽度的其余部分(整个“标题”容器也有 overflow: hidden 使这个技巧起作用)。这是代码:

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;
}