減少CSS中的上傳按鈕大小
[英]Reduce upload button size in CSS
問題描述
我創建了一個按鈕，用於上傳帶有圖標的文件，以便掩蓋輸入文本框，並且只有一個按鈕。 問題是我的按鈕占據了整個div的寬度。 我希望兩個按鈕並排。 但是，當我修改.btn文件時，選擇對話框已損壞，因此它沒有出現。 這是div：
<div id="mydiv">
A text <br>
An other text
<form id="test">
<span class="btn btn-block btn-file">
<i class="glyphicon glyphicon-export"></i>
<input type="file" name="file" id="exampleInputFile" file-model="customer.file" on-file-change="Submit">
</span>
</form>
<span class="glyphicon glyphicon-envelope"></span>
</div>
這是CSS：
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
font-size: 100px;
text-align: left;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
cursor: inherit;
display: block;
}
您能幫我對齊兩個按鈕並減小上傳按鈕的大小嗎？ 謝謝。
2 個解決方案
解決方案1
0 2016-06-06 07:51:19
您在外部跨度上擁有btn-block類-這使其以塊模式顯示，因此為什么它占用了所有可用寬度。 如果您不希望這種行為，請刪除該類。
解決方案2
0 已采納 2016-06-06 11:33:37
您只需要內聯到包含文件上傳按鈕的跨度即可。
我在這里修改了您的演示-https: //plnkr.co/edit/cYpho3SPeRV4NqqGOuHw?p=preview
.btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; font-size: 100px; text-align: left; filter: alpha(opacity=0); opacity: 0; outline: none; cursor: inherit; display: block; }
<!DOCTYPE html> <html> <head> <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> <link href="style.css" rel="stylesheet" /> </head> <body> <div id="mydiv"> A text <br> An other text <form id="test"> <span class="btn btn-block btn-file" style="display:inline"> <i class="glyphicon glyphicon-export"></i> <input type="file" name="file" id="exampleInputFile" file-model="customer.file" on-file-change="Submit"> </span> <span class="glyphicon glyphicon-envelope"></span> </form> </div> </body> </html>
在客戶端將視頻轉換為音頻，然后將其上傳到后端以減少上傳大小
[英]Convert Video to Audio in client side then upload it to backend to reduce uploading size
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.