使Flex子级内联块 [英] Make flex children inline-block

问题描述

我希望将flex子代渲染为inline-block，以使border-bottom在li的宽度以下，而不是容器的宽度.

I would like to have the flex children rendered inline-block so that border-bottom is under the li's width instead of the container's width.

显然不能将flex子级设置为内联块吗?

Apparently flex children can't be set as inline-block?

是否有解决此问题的方法?

Is there a workaround to this problem?

.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

推荐答案

将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项占用内容宽度，而不是父容器的宽度

More details here: Make flex items take content width, not width of parent container

这篇关于使Flex子级内联块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！