溢出隐藏中断布局

Question

我有两个按钮，其中一个包含输入文件。我为其添加了overflow: hidden以保持按钮的大小。不幸的是，这打破了按钮的界限。有没有人知道如何解决这个问题：http://jsfiddle.net/HNx8f/1/

Answer 1

只需将vertical-align:bottom;添加到.bottom课程，按钮就会再次显示为内嵌。

请参阅此更新的小提琴：http://jsfiddle.net/HNx8f/4/

.button{
    display: inline-block;
    vertical-align:bottom;
    width: 24px;
    height: 24px;
    background: red;
    position: relative;
    overflow: hidden;
    border: 0;
    text-indent: -9999px;
}

查看W3 Schools以获取您可能使用的属性的完整列表，但在您的情况下，这些属性中的任何一项都可以为您提供帮助：

• 顶
• 中间
• 底

Answer 2

修改玻璃.bottom将解决问题

.button {
    background: none repeat scroll 0 0 red;
    border: 0 none;
    float: left;
    height: 24px;
    margin-right: 7px;
    overflow: hidden;
    position: relative;
    text-indent: -9999px;
    width: 24px;
}