使用 flex 阻止元素在同一行重叠答案

【问题标题】：Using flex to stop elements from overlapping on the same line使用 flex 阻止元素在同一行重叠
【发布时间】：2022-02-16 05:30:15
【问题描述】：

我已经模拟了我的问题，其中我有一个下拉菜单，其中包括“添加”选项（在黑框中），如下所示：我可以使用 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>

它们的行为应该是这样的：

【问题讨论】：

您的要求不明确。为什么你不只使用 div 作为选项元素？
怎么样？ 3 人已设法了解需求并提供解决方案？
三个人猜了。我开始了，但怀疑我的解释。根据反对票，我并不孤单。图片有帮助。
特别是我对最小宽度规则感到困惑。考虑到选项的灵活性和唯一稍大的容器宽度，这对我来说没有意义。

标签： html css flexbox

【解决方案1】：

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

所有更改都是使用 flex 在 .options-wrapper 中进行的。也是.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>

【讨论】：

【解决方案2】：

.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;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
}

.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>

【讨论】：

对您更改或添加的内容进行一些解释将使这成为更好的答案。

【解决方案3】：

将 display=inline-block 添加到您的 span 元素中。如果你想要一些分隔，还可以添加 margin-bottom。

.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;
}

span{
display:inline-block;
margin-bottom:2px;}

<div class="dropdown">
  <div class="options-wrapper">
    <span class="option">Accepted</span>
    <span class="option">In progress</span>
  </div>
</div>

【讨论】：