相关疑难解决方法(0)

使flex儿童内联阻止

我想有呈现弯曲的孩子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)

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

html css css3 flexbox

2
推荐指数
1
解决办法
9439
查看次数

标签 统计

css ×1

css3 ×1

flexbox ×1

html ×1