将复选框、标签和输入框并排放置答案

【问题标题】：Putting a checkbox, label and input box next to each other将复选框、标签和输入框并排放置
【发布时间】：2017-02-11 04:26:00
【问题描述】：

我正在尝试将复选框、标签和输入框并排放置。

我把它分成多个 div，然后并排放置 div。

我能够让按钮居中，但它们要靠在一起，我也在尝试修复。

我的问题是如何将<div class="col-centered border"> 放入较小的边框并将复选框、标签和输入框并排放置。最后我想要按钮和所有的容器。

html

<div class="col-centered border">

    <form>
        <div class="first">

            <div class="form-group">
                <input type="checkbox" class="form-check-input">
                <label for="ssn">SSN:</label>
                <input type="text" class="form-control-file" id="ssn" placeholder="Social Security Number">
            </div>

            <div class="form-group row">
                <input type="checkbox" class="form-check-input">
                <label for="lastname">Lastname:</label>
                <input type="text" class="form-control-file" id="lastname" placeholder="Password">
            </div>

            <div class="form-group row">
                <input type="checkbox" class="form-check-input">
                <label for="role">Role:</label>
                <input type="text" class="form-control-file" id="role" placeholder="Password">
            </div>
        </div>

        <div class="second">

            <div class="form-group row">
                <input type="checkbox" class="form-check-input">
                <label for="userId">User ID:</label>
                <input type="text" class="form-control-file" id="userId" placeholder="User Id">
            </div>

            <div class="form-group row">
                <input type="checkbox" class="form-check-input">
                <label for="office">Office</label>
                <input type="text" class="form-control-file" id="office" placeholder="Office">
            </div>

            <input type="checkbox">Include Subordinates
        </div>

        <div class="center-block lower-button">
            <div class="center-block">
                <button type="submit" class="btn btn-default btn-md left-button">Search</button>
                <button type="submit" class="btn btn-default btn-md right-button">Reset</button>
            </div>
        </div>

    </form>
</div>

css

.first {
    width: 100px;
    float: left;
    padding-left: 450px;
}
.second {
    width: 200px;
    float: right;
    padding-right: 950px;
}

.col-centered{
    padding-top: 30px;
    float: none;
    margin: 0 auto;
}

.btn-beside {
    position: center;
    left: 100%;
    top: 0;
    margin-left: -10px;
}

.lower-button{
    padding-top:250px;
    padding-left:575px;
}

.left-button{
    padding-right: -14px;
}
.form-group{
    text-align: center;
}

我正在使用引导程序

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

这里有一个Fiddle 供您从中汲取灵感。

HTML

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="input-group">
        <span class="input-group-addon">
          <input type="checkbox">
        </span>
        <span class="input-group-addon">
          <label for="tbox">My Label</label>
        </span>
        <input type="text" id="tbox" class="form-control">
      </div>
    </div>
  </div>
</div>

根据 Bootstrap 的 official documentation。

【讨论】：