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标记覆盖这两个输入。你的意思是这样的吗？检查您的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

Juste添加显示＆＃34;内联块＆＃34;用class＆＃34; form-inline＆＃34; ：

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

我相信它应该完成这项工作。

编辑：太晚了;）

Answer 4

您可以为容器.form-inline提供display:inline-block;属性。希望我的问题是对的。

Answer 5

除FreeKrishna的答案外，您还可以

float:left

在css中

并按原样保留div。

如何内联显示文件输入？

5 个答案: