ディスプレイファイル入力をインライン化する方法は？

Question

は、どのように私は同じ行に複数のファイルの入力を設定するのですか？ radio-inlineと同様に、同じ行のラジオボタンを設定します。ファイル入力のためにこれを行う方法はありますか？

input[type="file"] { 
 
    display: none; 
 
} 
 
.custom-file-upload { 
 
    border: 1px solid #ccc; 
 
    display: inline-block; 
 
    padding: 6px 12px; 
 
    cursor: pointer; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class = "form-inline"> 
 
    <label for="file-upload" class="custom-file-upload"> 
 
    <i class="fa fa-cloud-upload"></i> Custom Upload 
 
    </label> 
 
    <input id="file-upload" type="file"/> 
 
</div> 
 

 
<div class = "form-inline"> 
 
    <label for="file-upload" class="custom-file-upload"> 
 
    <i class="fa fa-cloud-upload"></i> Custom Upload 
 
    </label> 
 
    <input id="file-upload" type="file"/> 
 
</div>

Answer 1

フォームインラインでinline-blockを使用してください。

input[type="file"] { 
 
    display: none; 
 
} 
 
.custom-file-upload { 
 
    border: 1px solid #ccc; 
 
    display: inline-block; 
 
    padding: 6px 12px; 
 
    cursor: pointer; 
 
} 
 
.form-inline{ 
 
    display:inline-block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class = "form-inline"> 
 
    <label for="file-upload" class="custom-file-upload"> 
 
    <i class="fa fa-cloud-upload"></i> Custom Upload 
 
    </label> 
 
    <input id="file-upload" type="file"/> 
 
</div> 
 
        
 
<div class = "form-inline"> 
 
    <label for="file-upload" class="custom-file-upload"> 
 
    <i class="fa fa-cloud-upload"></i> Custom Upload 
 
    </label> 
 
    <input id="file-upload" type="file"/> 
 
</div>

Answer 2

カバークラスフォームインライン有する単一のdivタグをwithingそれらの入力の両方。 は、あなたがこのような何かを意味しています。 fiddleを確認してください。その更新された。 -

<div class = "form-inline"> 
    <label for="file-upload" class="custom-file-upload"> 
    <i class="fa fa-cloud-upload"></i> File1 
    </label> 
    <input id="file-upload" type="file"/> 

    <label for="file-upload" class="custom-file-upload"> 
    <i class="fa fa-cloud-upload"></i> File1 
    </label> 
    <input id="file-upload" type="file"/> 
</div> 

Answer 3

ジュストクラス "フォームインライン" とDIVするディスプレイ "インラインブロック" を追加します。

.form-inline { 
    display:inline-block; 
} 

私はそれが仕事をする必要があります信じて。

EDIT：遅すぎる;あるようFreeKrishnaの答えに加えて）

Answer 4

は、あなたが

float:left 

CSSの

とはdivを残すことができます。

Answer 5

あなたは、コンテナ.form-inlineにdisplay:inline-block;性を付与することができます。 希望私は右のあなたの質問を得ました。