如何将我的复选框分开对齐？

问题描述

我想垂直对齐我的复选框。我的意思是每一行中的每个选项。 我在Google上搜索了他们建议的vertical-align: middle，但它只是更改了标签的位置。我希望每个复选框都在单独的行中。 我的代码在这里：

https://jsfiddle.net/Dr277/g9mc762o/2/

解决方法

嗨，欢迎来到stackoverflow。 将链接添加到小提琴非常好，但是您MUST也在此处添加了相关代码。

对于您的问题，解决此问题的快速方法是将label与元素（form？包裹在一起，然后将此元素设置为flexbox样式（您甚至可以删除现有样式）：>

form {display: flex; flex-flow: column; /* remove this if you want it horizontal   */ }

<div class="form-group">
          <p>Which superpower would you like to have? 
          <span class="clue">(Check all that apply)</span></p>
          <form>
          
          <label>
            <input 
              name="superpower"
              type="checkbox"
              value="mind-read"
              class="input-checkbox"
            >Mind Reading
          </label>
          <label>
            <input 
              name="superpower"
              type="checkbox"
              value="invisibility"
              class="input-checkbox"
            >Invisibility
          </label>
          <label>
            <input 
              name="superpower"
              type="checkbox"
              value="teleportation"
              class="input-checkbox"
            >Teleportation
          </label>
          <label>
            <input 
              name="superpower"
              type="checkbox"
              value="Flying"
              class="input-checkbox"
            >Flying
          </label>
          <label>
            <input 
              name="superpower"
              type="checkbox"
              value="have-superpower"
              class="input-checkbox"
            >I have already a superpower
          </label>
          </form>
        </div>