對齊引導輸入文本上的輸入文件

Question

我曾嘗試在此設計我自己的輸入文件基礎fiddle我需要正確對齊引導輸入文本中的按鈕。

這是我的代碼來設計我的輸入類型。 bootstrap的按鈕也不對齊。

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

入住這Fiddle

還要檢查Jasny's fork Bootstrap用於文件上傳，易於集成。