html - 如何内联显示文件输入？

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>