html+input+cursor,HTML input元素的父容器

被修剪

你看到左边的搜索框？父级隐藏搜索框底部的一部分。对齐关闭了，我不知道为什么。效果在Chrome和Firefox中都是持久的。

看看这个浏览器的调试器的快照：

所以父容器(蓝色)是三个相同宽度的div容器跨越的一个，你看“头”部分(这也是一个div)。现在，我也尝试使用“display：table”以表格格式解决这个问题，并使用实际的表格布局。这两个都会导致相同的问题，除了隐藏搜索框未看到的部分外，该框完全可见。尽管如此，它仍然与按钮不一致。但它不会扩展父容器高度以适应它，它会浮动并悬停在属于下面主要内容框的小型顶部边距上。

使用搜索框的边距不起作用，它不会改变。我还应该提到，这只会发生在输入元素上。如果我切换到textarea，它的工作方式应该是正确的(我不愿意只使用一个，我不想要多行文本框)。另外，在这里的例子中，我将左边的两个“标题”容器(搜索和导航按钮容器)漂浮，而右边的最后一个容器(具有1/35)溢出：隐藏以填充它其余的可用宽度(整个“标题”容器也有溢出：隐藏起来使这个技巧工作)。下面的代码：

HTML：

1/35

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;

}

任何人都可以提供任何见解或建议为什么发生这种情况？

2013-08-26

RTF

+1

你能提供一个小提琴或链接？ –