Question

我的UI中有两个div。一个div包含一个标签。另一个包含文件选择器。我希望他们能够并肩而立。

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

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

    <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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以这样做，只需添加display：inline-block和float left ..就像Bootstrap
一样或如果您已经在使用bootstrap，只需使用他们的网格类，例如＆＃34; col-xs-6＆＃34;对于这两个div getbootstrap.com/css/#grid

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

如果你使用Bootstrap，你可以将它们包装在类form的{{1}}元素中

如果您没有使用Bootstrap，可以使用form-inline和一些边距来创建它们之间的空格，如下所示：

float: left

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

Answer 4

替换你的代码。

    func accessTokenWithBearer() -> String {
            if !didTokenExpire() {
                return "Bearer \(accessToken!)"
            }else{
                Token.refresh({
                    return "Bearer \(self.accessToken!)"
                })
            }
    }

    class func refresh(completion: ()->()){
        completion()
    }

CSS Bootstrap和HTML中的UI Div对齐

4 个答案: