如何将flex子元素保留为内联元素？ [复制]答案

【问题标题】：How to keep flex children as inline elements? [duplicate]如何将flex子元素保留为内联元素？ [复制]
【发布时间】：2020-12-23 08:46:03
【问题描述】：

我使用border-bottom 来设置多行链接的样式：

div {
  display: inline-block;
  width: 100px;
  padding: 20px;
  background-color: #ddd;
}

a {
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 0, 255, 0.5);
}

<div>
  <a href="#">StackOverflow is awesome</a>
</div>

为此，<a> 需要是内联元素。

如果<a> 看起来是块级元素，则仅在底部绘制边框：

而且，当<a> 是 flexbox 的子级时，这正是发生的情况：

div {
  display: inline-flex;
  width: 100px;
  padding: 20px;
  background-color: #ddd;
}

a {
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 0, 255, 0.5);
}

<div>
  <a href="#">StackOverflow is awesome</a>
</div>

看起来，flex 父级的子级自动被视为块级元素。

有没有办法将 flex 子元素保留为内联元素？

【问题讨论】：

你到底想要什么？你能为此添加预期的输出吗？
这能回答你的问题吗？ Make flex children inline-block
也许使用this？
@RayeesAC 我希望能够对多行链接使用border-bottom 样式，而不管它们放置在什么上下文中。在上面的示例中，当链接放置在弹性上下文中时, 样式中断。
添加一个额外的包装器来扮演 inline 元素的角色是你唯一的解决方案

标签： html css flexbox

【解决方案1】：

只需将跨度添加到您的文本并为其添加样式

div {
  display: inline-flex;
  width: 100px;
  padding: 20px;
  background-color: #ddd;
}
span {
  padding-bottom: 5px;
  border-bottom: 2px solid rgba(255, 0, 255, 0.5);
  line-height: 30px;
}
a {
  text-decoration: none;
}

<div>
  <a href="#"><span>StackOverflow is awesome</span></a>
</div>

【讨论】：

【解决方案2】：

我认为你可以添加 white-space:nowrap 和 width:auto 来解决你的问题，而不是使标签内联，因为空格永远不会破坏你的文本到新行

div {
  display: inline-flex;
  width: auto;
  padding: 20px;
  background-color: #ddd;
}

a {
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid rgba(255, 0, 255, 0.5);
}

<div>
  <a href="#">StackOverflow is awesome</a>
</div>

【讨论】：