CSS 按列显示列表

Question

我有一份清单，由 Vue.js

这是我的代码：

<ul>
    <li
        v-for="category in item.children"
        :key="category.id"
        class="menu-item"
    >
        <nuxt-link
            :to="
                localePath(
                    `/category/${category.slug}/${category.id}`
                )
            "
        >
            <h5>{{ category.lang[0].name }}</h5>
        </nuxt-link>
        <ul class="mega-menu__list">
            <li
                v-for="subItem in category.children"
                :key="subItem.id"
            >
                <nuxt-link
                    :to="
                        localePath(
                            `/category/${subItem.slug}/${subItem.id}`
                        )
                    "
                >
                    {{ subItem.lang[0].name }}
                </nuxt-link>
            </li>
        </ul>
    </li>
</ul>

但我希望它像这样显示 child 在同一列中：

感谢任何帮助。

Answer 1

* {
  font-family: "Arial";
  font-size: 15px;
  margin: 0;
  padding: 0;
}

section {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 450px;
    height: 800px;
    margin: 0 auto;
}

div {
    display: flex;
    flex-direction: column;
    padding: 15px 30px;
}

h5 {
    margin-bottom: 20px;
    text-transform: uppercase;
}

ul {
    list-style: none;
}

li {
    line-height: 30px;
}

<section>
    <div>
        <h5>shop by concern</h5>
        <ul>
            <li>Pores</li>
            <li>Whitening</li>
            <li>Fine Lines &amp; Wrinkles</li>
            <li>Hydrating</li>
            <li>Dark Spots</li>
            <li>Anti-Aging</li>
            <li>Acne &amp; Blemishes</li>
        </ul>
    </div>
    <div>
        <h5>others</h5>
        <ul>
            <li>Tools &amp; Accessories</li>
            <li>Beauty Supplements</li>
        </ul>
    </div>
    <div>
        <h5>skincare package</h5>
    </div>
    <div>
        <h5>treatment</h5>
        <ul>
            <li>T-Zone &vert; Blackhead</li>
            <li>Ampoule</li>
            <li>Acne &vert; Blemishes</li>
            <li>Serum</li>
            <li>Pore Care</li>
            <li>Lip Care</li>
            <li>Eye Care</li>
        </ul>
    </div>
    <div>
        <h5>cleanser &amp; exfoliator</h5>
        <ul>
            <li>Scrub &amp; Exfoliator</li>
            <li>Face Wash &amp; Cleansers</li>
            <li>Soap</li>
        </ul>
    </div>
    <div>
        <h5>sun care</h5>
    </div>
    <div>
        <h5>moisturizer</h5>
        <ul>
            <li>Mist Spray</li>
            <li>Cream</li>
            <li>Moisturizer / Lotion</li>
        </ul>
    </div>
    <div>
        <h5>toner</h5>
    </div>
</section>

在我的示例中看到，如果您有足够的 height (css)，菜单将尝试到达那里，如果没有，它将向右移动（因为它有 space去那里是因为flex-wrap: wrap。把CSS属性和section和div中的每个CSS玩一玩，你就会明白更多。

您可以看到更多关于 flex here. And if you want to try out grid, here。

CSS 按列显示列表

CSS display list in columns

html

css

vue.js

css-multicolumn-layout