Question

＆＃13;

template<class F> friend class library_file;

＆＃13;

span{
text-align: justify;
}

＆＃13;

I want to align the label for excessive reinforcement checkbox like image2

For example

提前致谢

Answer 1

首先使用<label>代替<span>。

如果我们使用bootstrap，我们通常使用类来管理它，但是如果我们谈论自定义css，这可以是一个解决方案。

＆＃13;

label{
   text-align: justify;
   float: left;
   line-height: 20px;
}
input{
    float:left;
}

＆＃13;

<input type="checkbox" id="check" name="type"><label for="check">Excessive<br>Reinforcement</label><br>

＆＃13;

上面我在复选框中添加了id，在标签中添加了for，这样也会在点击标签时选中复选框。

如果您可以更改HTML

使用复选框的最佳和新方法是

<label><input type="checkbox" name="type">Excessive Reinforcement</label>

Answer 2

这是一种方法：

<label for="type-1">
   <input id="type=1" type="checkbox" name="type"> Excessive Reinforcement
</label><br>

使用输入元素时，应始终提供带有for属性的标签，该属性分配了input元素的id。并确保输入元素ID是唯一的。

Answer 3

span {
  text-align: justify;
}
.make-table {
  display: table-cell;
  /* make it behave like table-cell. so that they fall beside each other. */
}

<div class="any-class">
  <label><span class="make-table"><input type="checkbox" name="type"></span>
    <span class="make-table">Excessive<br> Reinforcement</span>
  </label>
</div>

<hr>
<div style="color:red">Wrap it inside any-class and align as you want.
  <br>I added LABEL tag, so that, even if your user clicks on the text, the checkbox will work.</div>

进行这个简单的改变！

如何将标签与复选框对齐

3 个答案: