css - 在引导输入文本上对齐输入文件

Question

我已经尝试在这个小提琴的基础上设计我自己的输入文件设计我自己的输入文件，我需要正确对齐引导输入文本中的按钮。

这是我设计输入类型的代码。引导程序的按钮也未对齐。

.forUplBtn {
    background-color:#427db8; 
    width:50px;

    display:inline-block;
    border: none;
    color: #fff; 
    padding:5px 20px 5px 20px;
    border:none;
    overflow:hidden;
    text-align:center;
    position:relative;
    margin:0;
}
.forUplBtn a{
    z-index:-1;
}



.forUplBtn input[type="file"]{
    /*margin-left:-145px;*/
    width: 100%;height:100%; position:absolute; left:0;top:0; opacity:0
}

Answer 1

尝试添加vertical-align:top并.forUplBtn添加上传按钮：

.uplPhot a button{
 vertical-align:top;
}

Answer 2

将以下内容添加css到您的代码中

button {
     position: absolute;
     margin-left: -90px;
     width: 90px;
     margin-top:4px
 }

检查这个小提琴

还要检查Jasny 的 fork Bootstrap文件上传，易于集成。