如何内联显示文件输入？

Question

如何在同一行上设置多个文件输入？就像在同一行上设置单选按钮一样。对于文件输入，有什么方法可以做到吗？

​

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标记覆盖这两个输入。你是说像这样的事。检查一下你的小提琴。它已经更新了。--

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

我相信它应该能胜任这项工作。

编辑:太迟了;)