怎么在横向li很多的情况下自动适应ul宽度换行_前端-CSDN问答

来源： 怎么在横向li很多的情况下自动适应ul宽度换行_前端-CSDN问答

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

要实现<ul>标签中的<li>元素在达到<ul>的宽度限制时自动换行，你可以使用CSS的display: flex属性和flex-wrap: wrap属性。以下是具体的CSS代码实现：

1. ul {
2. display: flex; /* 设置ul为flex容器 */
3. flex-wrap: wrap; /* 允许子元素换行 */
4. width: 100%; /* 或者设置一个固定的宽度，根据需要调整 */
5. list-style: none; /* 可选，去掉列表项的默认样式 */
6. padding: 0; /* 可选，去掉内边距 */
7. margin: 0; /* 可选，去掉外边距 */
8. }
10. li {
11. flex: 0 1 auto; /* 允许li元素自动调整大小 */
12. margin: 5px; /* 可选，设置li元素之间的间隔 */
13. }

这段代码会使得<ul>内的<li>元素在达到<ul>的宽度限制时自动换行。flex: 0 1 auto; 表示<li>元素不会强制占据固定空间，而是根据内容自动调整大小，并在需要时换行。

参考资料：

1. CSS Flexible Box Layout Module Level 1 – W3C
2. Flexbox Froggy – A game for learning CSS flexbox
3. CSS-Tricks – A Complete Guide to Flexbox

这些参考资料将帮助你更深入地了解Flexbox的工作原理和使用方法。