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

Question

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

Answer 1

您好，欢迎来到 Whosebug。很高兴您将 link 添加到 fiddle，但您 MUST 也在此处添加了相关代码。

至于你的问题，解决它的快速方法是用元素 (form?) 包裹 labels 并将这个元素设置为 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>

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

How to align my checkboxes separate lines?

html

css

checkbox

vertical-alignment