UI Div Alignments in CSS Bootstrap und HTML

Question

Ich habe zwei divs in meiner Benutzeroberfläche. Ein div enthält ein Label. Und der andere enthält einen Dateiwähler. Ich möchte, dass sie Seite an Seite stehen.

Aber jetzt sind sie vertikal gestapelt.

Wie kann ich sie horizontal mit ein wenig Abstand zwischen ihnen ausrichten?

<div> 
     <div> 
      <label>Upload File</label> 
     </div> 
     <div class="ui-select"> 
      <input type="file" name="files" ng-files="getTheFiles($files)" /> 
     </div> 
    </div> 
    <div style="clear:both;"></div> 
    <br/> 
    <div style="height:3px; background-color:#cccccc; width:100%; margin-top:5px;"></div> 
    <div style="padding-top:10px;"> 
     <input type="submit" class="btn btn-default" style="width:100px;" value="Upload" /> 

    </div> 

Answer 1

Ich denke, das Ihr Problem

.form-label,.form-input{ 
 
    display:inline-block; 
 
    margin-right:5px; 
 
}

<div> 
 
     <div class="form-label"> 
 
      <label>Upload File</label> 
 
     </div> 
 
     <div class="ui-select form-input"> 
 
      <input type="file" name="files" ng-files="getTheFiles($files)" /> 
 
     </div> 
 
    </div>

Answer 2

Wenn Sie sie in einem form Element der Klasse lösen sollten Sie Bootstrap verwenden können form-inline

Wenn Sie wickeln sind Ohne Bootstrap können Sie float: left und einige Marge verwenden, um das zu erstellen Raum zwischen ihnen wie folgt aus:

.inline{ 
 
    float: left; 
 
} 
 

 
.ui-select{ 
 
    margin-left: 12px; 
 
}

<div class="inline"> 
 
    <label>Upload File</label> 
 
</div> 
 
<div class="inline ui-select"> 
 
    <input type="file" name="files" ng-files="getTheFiles($files)" /> 
 
</div>

Answer 3

Sie können dies tun, nur durch Zugabe von display: inline-block und .. wie Bootstrap
Oder, wenn Sie bereits Bootstrap mit links Schwimmer verwenden nur ihr Netz Klassen wie "col-xs-6" für beide divs
getbootstrap.com/css/#grid

.label-container{display:inline-block;float:left;margin-right:25px;} 
 
.input-container{display:inline-block;float:left;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
     <div class="label-container"> 
 
      <label>Upload File</label> 
 
     </div> 
 
     <div class="input-container"> 
 
      <input type="file" name="files" ng-files="getTheFiles($files)" /> 
 
     </div> 
 
    </div> 
 
    <div style="clear:both;"></div> 
 
    <br/> 
 
    <div style="height:3px; background-color:#cccccc; width:100%; margin-top:5px;"></div> 
 
    <div style="padding-top:10px;"> 
 
     <input type="submit" class="btn btn-default" style="width:100px;" value="Upload" /> 
 

 
    </div>

Answer 4

Ersetzen Sie Ihren Code diesen.

<div> 
    <div style="float:left;"> 
     <label>Upload File</label> 
    </div> 
    <div class="ui-select" style="float:left; margin-left:20px;"> 
     <input type="file" name="files" ng-files="getTheFiles($files)" /> 
    </div> 
</div> 
<div style="clear:both;"></div> 
<br/> 
<div style="height:3px; background-color:#cccccc; width:100%; margin-top:5px;"></div> 
<div style="padding-top:10px;"> 
    <input type="submit" class="btn btn-default" style="width:100px;" value="Upload" /> 

</div>