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

场景描述:

我想要实现,在展示的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 defaultListComponent组件导出,以便在其他地方使用它。

方法二:还有另一种方法就是使用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 defaultListComponent组件导出,以便在其他地方使用它。

你可以在父组件中使用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;

在上面的例子中,我们在父组件App中创建了一个items数组,并将其作为items属性传递给ListComponent组件。你可以根据自己的需求修改items数组的内容.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/191134.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络运维Day14

监控概述 监控的目的 报告系统运行状况每一部分必须同时监控内容包括吞吐量、反应时间、使用率等提前发现问题进行服务器性能调整前&#xff0c;知道调整什么找出系统的瓶颈在什么地方 监控的资源类别 公开数据 Web、FTP、SSH、数据库等应用服务TCP或UDP端口 私有数据 CPU、内…

【Java 进阶篇】JQuery DOM操作:舞动网页的属性魔法

在前端的舞台上&#xff0c;属性操作是我们与HTML元素进行互动的关键步骤之一。而JQuery&#xff0c;这位前端开发的巫师&#xff0c;通过简洁而强大的语法&#xff0c;为我们提供了便捷的属性操作工具。在这篇博客中&#xff0c;我们将深入研究JQuery DOM操作中的属性操作&…

Android Rxjava架构原理与使用的详解解答

简单介绍 Rxjava这个名字&#xff0c;其中java代表java语言&#xff0c;而Rx是什么意思呢&#xff1f;Rx是Reactive Extensions的简写&#xff0c;翻译过来就是&#xff0c;响应式拓展。所以Rxjava的名字的含义就是&#xff0c;对java语言的拓展&#xff0c;让其可以实现对数据…

【论文精读】Pose-Free Neural Radiance Fields via Implicit Pose Regularization

今天读的是一篇发表在ICCV 2023上的文章&#xff0c;作者来自NTU。 文章地址&#xff1a;点击前往 文章目录 Abstract1 Intro2 Related Work3 Preliminary4 Proposed Method4.1 Overall Framework4.2 Scene Codebook Construction4.3 Pose-Guided View Reconstruction4.4 Train…

HTML设置标签栏的图标

添加此图标最简单的方法无需修改内容&#xff0c;只需按以下步骤操作即可&#xff1a; 1.准备一个 ico 格式的图标 2.将该图标命名为 favicon.ico 3.将图标文件置于index.html同级目录即可 为什么我的没有变化&#xff1f; 答曰&#xff1a;ShiftF5强制刷新一下网页就行了

Python实现WOA智能鲸鱼优化算法优化卷积神经网络回归模型(CNN回归算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 鲸鱼优化算法 (whale optimization algorithm,WOA)是 2016 年由澳大利亚格里菲斯大学的Mirjalili 等提…

ELK之Logstash解析时间相差8h的问题

一、问题描述 服务器当前时间为&#xff1a;2022年 06月 28日 星期二 11:24:22 CST 而logstash解析的时间为2022-06-28T03:15:25.545Z与实际时间相差8h 一、解决办法&#xff1a; 需改logstash的配置文件&#xff1a; 原理就是&#xff1a;定义一个中间变量timestamp&…

Linux系统编程——标准c库对文件操作

Linux、标准c库对文件操作的区别 1.来源 从来源的角度看&#xff0c;两者能很好的区分开&#xff0c;这也是两者最显而易见的区别: open是UNIX系统调用函数 (包括LINUX等) &#xff0c;返回的是文件描述符 (File Descriptor)&#xff0c;它是文件在文件描述符表里的索引。.f…

postswigger 靶场(CSRF)攻略-- 1.没有防御措施的 CSRF 漏洞

靶场地址&#xff1a; What is CSRF (Cross-site request forgery)? Tutorial & Examples | Web Security Academy (portswigger.net)https://portswigger.net/web-security/csrf 没有防御措施的 CSRF 漏洞 题目中已告知易受攻击的是电子邮件的更改功能&#xff0c;而目…

搜索引擎项目

认识搜索引擎 1、有一个主页、有搜索框。在搜索框中输入的内容 称为“查询词” 2、还有搜索结果页&#xff0c;包含了若干条搜索结果 3、针对每一个搜索结果&#xff0c;都会包含查询词或者查询词的一部分或者和查询词具有一定的相关性 4、每个搜索结果包含好几个部分&…

数据库恢复技术

事务 含义&#xff1a;用户定义的一个数据库操作序列&#xff0c;这些操作要么全做&#xff0c;要么全不做&#xff0c;是一个不可分割的工作单位 地位&#xff1a;恢复和控制并发的基本单位 区分事务和程序&#xff0c;一个程序中包含多个事务 定义事务 事务的开始与结束…

景联文科技加入中国人工智能产业发展联盟(AIIA),与行业各方共促AI产业发展

近日&#xff0c;景联文科技加入中国人工智能产业发展联盟&#xff08;AIIA&#xff09;&#xff0c;与行业各方共同挖掘人工智能数据的更多价值&#xff0c;破解中国人工智能AI数据短缺难题。 中国人工智能产业发展联盟&#xff08;简称AIIA&#xff09;是在国家发改委、科技部…

PostgreSQL 机器学习插件 MADlib 安装与使用

MADlib 一个可以在数据库上运行的开源机器学习库&#xff0c;支持 PostgreSQL 和 Greenplum 等数据库&#xff1b;并提供了丰富的分析模型&#xff0c;包括回归分析&#xff0c;决策树&#xff0c;随机森林&#xff0c;贝叶斯分类&#xff0c;向量机&#xff0c;风险模型&#…

逐帧动画demo

用这一张图实现一个在跑的猎豹的动画 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X…

RabbitMq防止消息丢失

RabbitMq防止消息丢失 消息的传递路径出现消息丢失的位置解决 消息的传递路径 消息发送方 --> MQ --> 消息消费方 出现消息丢失的位置 消息发送方: 消息传输过程中丢失MQ: MQ收到消息后,存在内存中,还未被消费就宕机了,导致数据丢失消息消费方: 消息到达消费方后, 服务…

创建maven的 java web项目

创建maven的 java web项目 创建出来的项目样子 再添加java和resources文件夹 一定要如图有文件夹下有图标才代表被IDEA识别&#xff0c;不让是不行的 没有的话在File——ProjectStructure中进行设置

【KCC@南京】KCC南京数字经济-开源行

一场数字经济与开源的视听盛宴&#xff0c;即将于11月26日&#xff0c;在南京举办。本次参与活动的有&#xff1a; 庄表伟&#xff08;开源社理事执行长、天工开物开源基金会执行副秘书长&#xff09;、林旅强Richard&#xff08;开源社联合创始人、前华为开源专家&#xff09;…

Linux SSH免密登录

目录 简介 创建Linux用户和用户组 配置LINUX静态IP 编辑IP映射 SSH免密登录配置 登录测试 简介 SSH&#xff08;Secure shell&#xff09;是可以在应用程序中提供安全通信的一个协议&#xff0c;通过SSH可以安全地进行网络数据传输&#xff0c;它的主要原理是利用非对称加密…

Web后端开发_01

Web后端开发 请求响应 SpringBoot提供了一个非常核心的Servlet 》DispatcherServlet&#xff0c;DispatcherServlet实现了servlet中规范的接口 请求响应&#xff1a; 请求&#xff08;HttpServletRequest&#xff09;&#xff1a;获取请求数据响应&#xff08;HttpServletRe…

数据结构 顺序表和链表

1.线性表 线性表&#xff08;linear list&#xff09;是n个具有相同特性的数据元素的有限序列 线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串.. 线性表在逻辑上是线性结构&#xff0c;也就说是连续的一条直线…