Question

我有一个下拉菜单，例如：

.dropdown {
    display: flex;
    flex-direction: column;
}

    <div class="dropdown">
        <input type="checkbox"> Foo <span> This is foo </span>
        <input type="checkbox"> Bar <span> This is bar </span>
    </div>

但是在代码段中，您可以看到所有内容都显示在其自己的新行中。如何将其放置在一行内，该行将垂直一一显示？

我的预期结果：

Checkbox Foo This is foo Checkbox Bar This is bar

Answer 1

这是您应该如何做：

.dropdown {
display: flex;
flex-direction: column;
}

<div class="dropdown">
 <div class="child"><input type="checkbox"> Foo <span> This is foo </span></div>
 <div class="child"><input type="checkbox"> Bar <span> This is bar </span></div>  
</div>

我刚刚指定了div class="child"以了解其工作原理。

在div中指定此值时，作为父容器下拉列表的子项，您会自动将div“子”作为行块，而父容器将采用所有child div并将它们堆叠为由于flex-direction: column

希望有帮助。

Answer 2

只需在每个div周围包裹一个input

.dropdown {
    display: flex;
    flex-direction: column;
}

<div class="dropdown">
  <div>
     <input type="checkbox"> Foo <span> This is foo </span>
  </div>
  <div>
     <input type="checkbox"> Bar <span> This is bar </span>
  </div>
</div>

Answer 3

像我一样将列更改为行

.dropdown {
    display: flex;
    flex-direction: row;
}

        <div class="dropdown">
          <input type="checkbox"> Foo <span> This is foo </span>
        </div>
        <div class="dropdown">
          <input type="checkbox"> Bar <span> This is bar </span>
        </div>

Answer 4

尝试一下：

无需放置CSS样式，仅使用以下代码即可获得预期的输出。

  <div class="dropdown">
        <input type="checkbox" >  Foo <span> This is foo<br>
        <input type="checkbox" >  Bar <span> This is bar
    </div>

Answer 5

添加包装span。

.dropdown {
    display: flex;
    flex-direction: column;
}

    <div class="dropdown">
        <span><input type="checkbox"> Foo <span> This is foo </span></span>
        <span><input type="checkbox"> Bar <span> This is bar </span></span>
    </div>

Answer 6

无需使用flexbox，只需稍微修改一下HTML

    <div class="dropdown">
        <label>
              <input type="checkbox"> Foo <span> This is foo </span>
        </label>
        <br/>
        <label>
              <input type="checkbox"> Bar <span> This is bar </span>
        </label>
    </div>

如何在CSS中一一垂直显示项目？

6 个答案: