列出反应灵敏的班次

List with responsive shifts

本文关键字：      更新时间：2023-09-26

我有一个未排序的列表，在全尺寸页面上看起来像这样：

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可以用于未排序的列表？

尝试此代码

       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的高度以满足您的设计需求

试试这个

li {
    display:inline-block;
    width:33
}
相关文章：
  • 没有找到相关文章