我如何垂直对齐复选框和文本？

Question

我希望复选框彼此平行，并且文本对齐相同。这就是我所拥有的（我是新来的）：`

<input type="checkbox"
          name=”liste1”
          value="1">This is Example1<br>
        <input type="checkbox"
          name=”liste1”
          value="2">Example2<br>
        <input type="checkbox"
          name=”liste1”
          value="3">Example123456<br>
        <input type="checkbox"
          name=”liste1”`enter code here`
          value="4">Option4<br>`

This is how it looks like

Answer 1

首先，我们将更正代码的原始版本：

• ”不是在HTML中使用的有效引号，您应该使用"或'
• 如果HTML标签没有闭合标签（例如<p>content</p>），则称为自闭合，并且在闭合尖括号前应加斜杠，例如：<input />

这给我们：

<input type="checkbox" name="liste1" value="1" />This is Example1<br />
<input type="checkbox" name="liste1" value="2" />Example2<br />
<input type="checkbox" name="liste1" value="3" />Example123456<br />
<input type="checkbox" name="liste1" value="4" />Option4<br />

这足以使其看起来正确，但是通常，如果要在复选框旁边显示文本，则希望它可单击并影响该复选框。最简单的方法是将输入及其标签文本包装在<label>元素内，如下所示：

label {
  display: block;
}

<label>
  <input type="checkbox" name="liste1" value="1" />
  This is Example1
</label>
<label>
  <input type="checkbox" name="liste1" value="2" />
  Example2
</label>
<label>
  <input type="checkbox" name="liste1" value="3" />
  Example123456
</label>
<label>
  <input type="checkbox" name="liste1" value="4" />
  Option4
</label>

（（我也使用了小的CSS规则而不是<br />标记，因为通常最好使用CSS进行布局）

Answer 2

尝试一下：

.checkboxes{
     text-align:center;
}

<div class="checkboxes">
     <input type="checkbox"
          name=”liste1”
          value="1">This is Example1<br>
      <input type="checkbox"
          name=”liste1”
          value="2">Example2<br>
       <input type="checkbox"
          name=”liste1”
          value="3">Example123456<br>
       <input type="checkbox"
          name=”liste1”`enter code here`
          value="4">Option4<br>
</div>