html - 如何对齐我的复选框单独的行？

Question

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

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

标签： htmlcsscheckboxvertical-alignment

Answer 1

您好，欢迎来到 stackoverflow。将链接添加到小提琴很棒，但您也必须在此处添加相关代码。

至于你的问题，解决它的快速方法是label用元素（？）包装 sform并将这个元素设置为 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>