我想有呈现弯曲的孩子inline-block,这样border-bottom是下li的宽度,而不是容器的宽度.
显然flex儿童不能设置为内联块?
这个问题有解决方法吗?
.menu {
display: flex;
flex-flow: column;
list-style: none;
padding: 0;
}
.menu > li {
display: inline-block;
margin-bottom: 1rem;
border-bottom: 3px solid black;
}Run Code Online (Sandbox Code Playgroud)
<ul class="menu">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>Run Code Online (Sandbox Code Playgroud)