使 flex 子元素成为 inline-block

Question

使 flex 子元素成为 inline-block

22

我希望 flex 子元素能够以 inline-block 的形式呈现，这样 border-bottom 就能占据 li 宽度而不是容器宽度。

似乎无法将 flex 子元素设置为 inline-block？

这个问题有解决方法吗？

.menu {
  display: flex;
  flex-flow: column;
  list-style: none;
  padding: 0;
}
.menu > li {
  display: inline-block;
  margin-bottom: 1rem;
  border-bottom: 3px solid black;
}

<ul class="menu">
  <li>Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>

https://codepen.io/joshuajazleung/pen/EbwZmJ

- Joshua Leung

如果您将其设置为inline-block，则它将不再是flex。您的问题写成那样没有意义。 - Rob

1

@Rob如果将inline-block设置为_flex项_不会使其_“不再是flex”_，尽管它不会产生预期的结果。 - Asons

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

在容器中添加align-items: flex-start:

.menu {
  display: flex;
  flex-flow: column;
  align-items: flex-start; /* NEW */
  list-style: none;
  padding: 0;
}
.menu > li {
  margin-bottom: 1rem;
  border-bottom: 3px solid black;
}

<ul class="menu">
  <li>Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>

或者...从display: flex切换到display: inline-flex。

.menu {
  display: inline-flex;
  flex-flow: column;
  list-style: none;
  padding: 0;
}
.menu > li {
  margin-bottom: 1rem;
  border-bottom: 3px solid black;
}

<ul class="menu">
  <li>Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>

更多细节请查看：使flex项目占据内容宽度，而非父容器的宽度