Question

我在完整尺寸的页面上有一个无序列表：

Item 1
Item 2
Item 3
Item 4
Item 5               <some content here>
Item 6
Item 7
Item 8
Item 9

但我想要它去：

Item 1               Item 4                Item 7
Item 2               Item 5                Item 8
Item 3               Item 6                Item 9

<some content>

手机宽度为100％。

我有div中的列表和“其他内容”做我需要的东西，但是对于列表，我应该使用表格，还是我可以使用无序列表的CSS？

Answer 1

试试这段代码

       ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            height: 300px;
            width: 100%;
        }

        li {
            flex: 1;
            min-height: 100px;
        }

    </style>
</head>

<body>

    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
    </ul>

</body>

调整ul和li的高度以满足您的设计需求

Answer 2

试试这个

li {
    display:inline-block;
    width:33
}

列出响应变化

2 个答案: