时间戳

首页 > 解决方案 > 使用 flex 阻止元素在同一行重叠

html - 使用 flex 阻止元素在同一行重叠

问题描述

我已经模拟了我的问题，其中我有一个下拉菜单，其中包括“添加”选项（在黑框中），如下所示：我可以使用 flex 来阻止选项拆分为两行并且它们一直在聚集吗？根据用户的输入，我可以有任意数量的选项。

.dropdown {
  top: 100%;
  max-width: 150px;
  white-space: normal;
  padding: 0.5rem 0rem;
  margin: 0.125rem 0rem 0rem;
  border: 1px solid grey;
}

.options-wrapper {
  margin-left: 16px;
  margin-bottom: 8px;
}

.option {
  padding: 8px;
  background-color: black;
  color: white;
  min-width: 120px;
}
<div class="dropdown">
  <div class="options-wrapper">
    <span class="option">Accepted</span>
    <span class="option">In progress</span>
  </div>
</div>

他们的行为应该是这样的： 在此处输入图像描述

标签： htmlcssflexbox

解决方案

是的。你可以使用 flex 来解决这个问题。

所有更改都是在.options-wrapper使用 flex 时进行的。也是.option增加边距的一项补充。我还评论了max-width模仿你的形象。

.dropdown {
  top: 100%;
  /* max-width: 150px; */
  white-space: normal;
  padding: 0.5rem 0rem;
  margin: 0.125rem 0rem 0rem;
  border: 1px solid grey;
}

.options-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.option {
  padding: 8px;
  background-color: black;
  color: white;
  min-width: 120px;
  margin: .5rem;
}
<div class="dropdown">
  <div class="options-wrapper">
    <span class="option">Accepted</span>
    <span class="option">In progress</span>
  </div>
</div>

推荐阅读