Question

我想把一个复选框，标签和输入框放在一起。

我将它分成了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;
}

我正在使用bootstrap

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

将复选框，标签和输入框放在一起

1 个答案:

HTML