Question

我在这里学到了： Multi columns list by css 如何进行自调整多列列表。但是还有一个问题：容器没有根据它的内容调整宽度： https://jsfiddle.net/rkofktdz/3/

＆＃13;

ul {
    height: 40px;
    display:inline-flex;
    flex-direction: column;
    flex-wrap: wrap;
    border: 2px solid black;
    background-color: grey;
    padding: 0;
}
li {
    list-style: none;
}
a {
    display: inline-block;
    width: 60px;
}

＆＃13;

    <ul>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
    </ul>

＆＃13;

我可以通过应用固定宽度来扩展容器（ul），但我想让它自行调整。这是三级菜单的一部分，有点复杂： http://nachrichtentisch.de/

Answer 1

请检查这是否是您想要达到的目的：

https://jsfiddle.net/rkofktdz/4/

ul {
display:flex;
flex-wrap: wrap;
}
li {
    list-style: none;
    flex-direction: column;
    display: flex;
    border: 2px solid black;
    background-color: grey;
    height: 40px;
    padding: 0;
    margin: 0 10px;
}
a {
    display: inline-block;
    width: 60px;
}

Flex容器不适应内容

1 个答案: