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

我曾嘗試在此設計我自己的輸入文件基礎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 
}

來源

2013-07-23 Snippet

嘗試增加vertical-align:top到.forUplBtn並添加本作的上傳按鈕：

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

來源

2013-07-23 05:11:29

很好用。謝謝 – Snippet

添加下面的css到你的代碼

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

入住這Fiddle

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

來源

2013-07-23 05:11:53 Praveen

仍然沒有對齊 – Snippet

@Snippet你檢查了小提琴嗎？它是正確的？ – Praveen

上傳按鈕的上方和左側有一個空格..但感謝鏈接 – Snippet

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

回答

相關問題