Question

我需要上传护照和照片，但我希望它是内联的

<div id="upload">
   <div>
      <label for="Passportcopy">Passport Copy</label>
      <input type="file" id="Passportcopy">
   </div>
   <div >
      <label for="Photo">Photo</label>
      <input type="file" id="Photo">
   </div>
</div>

css

#passport{
    float:left;
    display:inline;
    width:250px;
}

#photo{
    float:right;
    display:inline;
    width:250px;        
}

我使用了以下css的容器。是div的bcz文件上传的块形式会出现吗？

label, input, div {
     display: block;         
}

input{
    margin-bottom:10px;
    width: 40px;    
}

或宽度或清晰的容器

.container {
     width:500px;
     clear:both;
}
.container input {
    width: 100%;
    clear: both;
}

Answer 1

你在找这样的东西吗？

＆＃13;

 #passport{
    float:left;
    display:inline;
    width:250px;
 }

 #photo{
    float:right;
    display:inline;
    width:250px;
 }

#upload div{ /* new code */
  display:inline;
}

＆＃13;

<div id="upload">
  <div>
    <label for="Passportcopy">Passport Copy</label>
    <input type="file" id="Passportcopy">
  </div>
  <div>
    <label for="Photo">Photo</label>
    <input type="file" id="Photo">
  </div>
</div>

＆＃13;

Answer 2

使用form-control和<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div id="upload row"> <form class="form-inline"> <div class="row"> <div class="form-group col-xs-6 col-md-3 "> <label for="Passportcopy">Passport Copy</label> <input type="file" class="form-control" id="Passportcopy"> </div> <div class="form-group col-xs-6 col-md-3 col-md-offset-1"> <label for="Photo">Photo</label> <input type="file" class="form-control" id="Photo"> </div> </div> </form> </div> </div> </body> </html>类可以在引导程序中内联表单元素。如果以这种方式使用它，则不需要使用任何CSS。我提供了一个演示它的片段。

示例

{{1}}

希望这有帮助！

内联上传文件

2 个答案: