html - CSS Bootstrap 和 HTML 中的 UI Div 对齐

Question

我的 UI 中有两个 div。一个 div 包含一个 label 。另一个包含一个文件选择器。我希望他们并肩。

但现在它们是垂直堆叠的。

如何水平对齐它们并在它们之间留出一点空间？

    <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

我认为这应该可以解决您的问题

.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>