复选框

Question

我需要在同一行显示复选框和文字。

＆＃13;

＆＃13;

input[type="checkbox"] {
  width: 20px;
  /*Desired width*/
  height: 20px;
  /*Desired height*/
  background: white;
}

＆＃13;

<div class='form-group'>
  <div class='col-sm-4'>
    <label> BO Dashboard</label>
  </div>
  <div class='col-sm-4'>
    <input type="checkbox" name="" value="" checked>Access
  </div>
  <div class='col-sm-4'>
    <input type="checkbox" name="" value="">Control
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以这样做：

position: relative;
vertical-align: middle;

这会将输入文本放在中间。 请参阅以下代码：

input[type="checkbox"]{
  width: 20px; /*Desired width*/
  height: 20px; /*Desired height*/
  background: white;
  position: relative;
  vertical-align: middle;
}

<div class='form-group'>
   <div class='col-sm-4'>
      <label> BO Dashboard</label>
   </div>
   <div class='col-sm-4'>
      <input type="checkbox" name="" value="" checked >Access
   </div>
   <div class='col-sm-4'>
      <input type="checkbox" name="" value="">Control
   </div>
</div>

Answer 2

您需要使用vertical-align:middle;。 vertical-align属性设置元素的垂直对齐方式。最常见的垂直对齐属性是基线，文本顶部，顶部，中间，底部，文本底部。阅读更多相关信息here。

input[type="checkbox"] {
  width: 20px;
  /*Desired width*/
  height: 20px;
  /*Desired height*/
  background: white;
  vertical-align:middle;
}

<div class='form-group'>
  <div class='col-sm-4'>
    <label> BO Dashboard</label>
  </div>
  <div class='col-sm-4'>
    <input type="checkbox" name="" value="" checked>Access
  </div>
  <div class='col-sm-4'>
    <input type="checkbox" name="" value="">Control
  </div>
</div>

Answer 3

尝试这样的事情：

<div class="container">
  <form>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 1
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 2
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 3
    </label>
  </form>
 </div>