当前位置：首页 > news >正文

前端案例-css实现ul中对li进行换行

news 2025/8/8 4:11:46

场景描述：

我想要实现，在展示的item个数少于4个的时候，则排成一行，并且均分（比如说有3个，则每个的宽度为33.3%），如果item 个数大于4，则进行换行。

效果如下：
在这里插入图片描述

方法一：使用flex进行换行

ul {display: flex; // 用于换行flex-wrap: wrap;list-style-type: none;
}li {flex-basis: 25%; /* 每个项的基础宽度为20%，即每行显示5列 */
}@media (max-width: 4 * 25%) {li {flex-basis: calc(100% / 4); /* 计算每个项的宽度，使其在小于等于4个项时均分 */}
}

如果是在react组件里，内置样式的话，可以通过如下实现。

const ListComponent = ({ items }) => {return (<ulstyle={{display: 'flex',flexWrap: 'wrap',listStyleType: 'none',}}>{items.map((item, index) => (<listyle={{flexBasis: item.length < 5 ? `${100 / item.length}%` : '20%',textAlign :'center'}}key={index}>{item}</li>))}</ul>);
};export default ListComponent;

在上面的代码中，我们使用箭头函数定义了ListComponent函数组件，并接受一个items属性。

在组件的返回值中，我们使用JSX语法来渲染一个<ul>元素和若干个<li>元素。我们使用display: 'flex'和flexWrap: 'wrap'样式来实现换行效果。listStyleType属性设置为none以去除默认的列表样式。

然后，我们使用map()函数遍历items数组，并为每个项创建一个<li>元素。我们使用条件语句来确定flexBasis属性的值。如果项的长度小于5，我们将flexBasis设置为${100 / item.length}%，以实现均分效果。否则，我们将flexBasis设置为25%，以每行显示4列。

最后，我们通过export default将ListComponent组件导出，以便在其他地方使用它。

方法二：还有另一种方法就是使用grid布局

当使用React函数组件来实现一个<ul>和<li>列表，在小于等于4个项时排成一行并均分，在大于4个项时每行显示4列，并在超过4列时换行，可以按照以下方式编写代码：

import React from 'react';function ListComponent({ items }) {return (<ul style={{display: 'grid',gridTemplateColumns: `repeat(${Math.min(items.length, 4)}, 1fr)`,gap: '10px',listStyleType: 'none',}}>{items.map((item, index) => (<li key={index}>{item}</li>))}</ul>);
}export default ListComponent;

在上面的代码中，我们创建了一个名为ListComponent的React函数组件。它接受一个items属性，这是一个包含要显示的项的数组。

在组件的返回值中，我们使用JSX语法来渲染一个<ul>元素和若干个<li>元素。通过设置<ul>元素的样式，我们使用Grid布局来达到所需的效果。gridTemplateColumns属性使用repeat()函数来动态设置列的数量。Math.min(items.length, 4)确保在小于等于4个项时，列的数量不超过4。gap属性用于设置列之间的间距。listStyleType属性设置为none以去除默认的列表样式。

然后，我们使用map()函数遍历items数组，并为每个项创建一个<li>元素。我们使用index作为key属性来确保每个项都有唯一的标识。

最后，我们通过export default将ListComponent组件导出，以便在其他地方使用它。

你可以在父组件中使用ListComponent并传递items属性，如下所示：

import React from 'react';
import ListComponent from './ListComponent';function App() {const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8'];return (<div><h1>List Example</h1><ListComponent items={items} /></div>);
}export default App;