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

前端案例-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数组的内容.

相关文章:

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

场景描述&#xff1a; 我想要实现&#xff0c;在展示的item个数少于4个的时候&#xff0c;则排成一行&#xff0c;并且均分&#xff08;比如说有3个&#xff0c;则每个的宽度为33.3%&#xff09;&#xff0c;如果item 个数大于4&#xff0c;则进行换行。 效果如下&#xff1a…...

【Unity】 场景优化策略

Unity 场景优化策略 GPU instancing 使用GPU Instancing可以将多个网格相同、材质相同、材质属性可以不同的物体合并为一个批次&#xff0c;从而减少Draw Calls的次数。这可以提高性能和渲染效率。 GPU instancing可用于绘制在场景中多次出现的几何体&#xff0c;例如树木或…...

JavaWeb Day09 Mybatis-基础操作01-增删改查

目录 环境准备 ①Emp.sql ②Emp.java 一、删除 ①Mapper层 ②测试类 ③预编译SQL&#xff08;查看mybatis日志&#xff09; 1.性能 2.安全 ④总结 二、新增 ①Mapper层 ②测试类 ③结果 ④新增&#xff08;主键返回&#xff09; 1.Mapper层 2.测试类 ⑤总结​…...

2.前端调试(控制台使用)

消息堆叠 如果一条消息连续重复&#xff0c;而不是在新行上输出每一个消息实例&#xff0c;控制台将“堆叠”消息并在左侧外边距显示一个数字。此数字表示该消息已重复的次数。 如果您倾向于为每一个日志使用一个独特的行条目&#xff0c;请在 DevTools 设置中启用 Show times…...

Jenkins简介及Docker Compose部署

Jenkins是一个开源的自动化服务器&#xff0c;用于自动化构建、测试和部署软件项目。它提供了丰富的插件生态系统&#xff0c;支持各种编程语言和工具&#xff0c;使得软件开发流程更加高效和可靠。在本文中&#xff0c;我们将介绍Jenkins的基本概念&#xff0c;并展示如何使用…...

sqli-labs关卡14(基于post提交的双引号闭合的报错注入)通关思路

文章目录 前言一、回顾上一关知识点二、靶场第十四关通关思路1、判断注入点2、爆显位3、爆数据库名4、爆数据库表5、爆数据库列6、爆数据库关键信息 总结 前言 此文章只用于学习和反思巩固sql注入知识&#xff0c;禁止用于做非法攻击。注意靶场是可以练习的平台&#xff0c;不…...

【广州华锐互动】楼宇智能化VR虚拟教学系统

在如今的技术时代&#xff0c;教育行业正在逐步引入各种创新方法以提升教学质量。VR公司广州华锐互动开发的楼宇智能化VR虚拟教学系统就是其中的一种&#xff0c;它利用虚拟现实(VR)技术&#xff0c;为学生提供一种全新的、沉浸式的学习体验。 楼宇智能化VR虚拟教学系统涵盖综合…...

5. HTML常用标签

5.1 标签语义 学习标签是有技巧的&#xff0c;重点是记住每个标签的语义。简单理解就是指标签的含义。即这个标签是用来干嘛的。 根据标签的语义&#xff0c;在合适的地方给一个最为合理的标签。可以让页面结构给清晰。 5.2 标题标签 <h1>-<h6>(重要) HTML提供了…...

傅里叶分析(2)

在《傅里叶分析&#xff08;1&#xff09;》中&#xff0c;讲述了连续信号的傅里叶分析方法&#xff0c;本文讲述离散信号的傅里叶分析方法。 虽然电、声、光、机械振动等信号在物理上是连续函数&#xff0c;但在实际工程中&#xff0c;其通常为离散信号&#xff0c;即若干离散…...

Mysql8数据库如何给用户授权

转载自&#xff1a;https://blog.csdn.net/Numb_ZL/article/details/124222795 查看用户已有权限 SHOW GRANTS FOR [用户名];使用root用户授予所有权限 -- 授权 GRANT ALL PRIVILEGES ON [数据库名].[表明] TO [用户名][连接主机ip地址] WITH GRANT OPTION; -- 刷新权限 FLU…...

reticulate | R-python调用 | 安装及配置 | conda文件配置

reticulate | R-python安装及配置 | conda文件配置 1. 基础知识2. 安装reticulate from CRAN3. 包含了用于Python和R之间协同操作的全套工具&#xff0c;在R和Rstudio中均可使用4. 配置python环境4.1 4种环境配置方式4.2 miniconda 环境install_miniconda()报错一install_minic…...

VueRequest——管理请求状态库

文章目录 前言一、为什么选择 VueRequest&#xff1f;二、使用步骤1.安装2.用例 前言 VueRequest——开发文档 VueReques——GitHub地址 在以往的业务项目中&#xff0c;我们经常会被 loading 状态的管理、请求的节流防抖、接口数据的缓存、分页等重复的功能实现所困扰。每次开…...

GPT-4 Turbo 发布 | 大模型训练的新时代:超算互联网的调度与调优

★OpenAI&#xff1b;ChatGPT;Sam Altman&#xff1b;Assistance API&#xff1b;GPT4 Turbo&#xff1b;DALL-E 3&#xff1b;多模态交互&#xff1b;算力调度&#xff1b;算力调优&#xff1b;大模型训练&#xff1b;GH200&#xff1b;snowflake&#xff1b;AGI&#xff1b;A…...

Django路由层

路由层&#xff08;urls&#xff09; Django的路由层是负责将用户请求映射到相应的视图函数的一层。在Django的MVT架构中&#xff0c;路由层负责处理用户的请求&#xff0c;然后将请求交给相应的视图函数进行处理&#xff0c;最后将处理结果返回给用户。 在Django中&#xff0c…...

关于session的不断变化问题

今天在帮同学解决一个小问题&#xff0c;差点阴沟翻船。 问题再现&#xff1a;他从github上拉了一个项目下来跑&#xff0c;结果发生跑不通问题出现在验证码一直不对。 我一看项目源码&#xff0c;验证码生成后存储再session中了&#xff0c;等用户发送请求验证的时候sessionI…...

eNSP启动路由器一直出#号、以为是安装配置winpcap的问题。。。。(以为是win10安装winpcap失败的问题。。。)

问题描述&#xff1a;eNSP启动一直出#号的一种参考方法_ensp一直#_Hong的博客-CSDN博客 原因是看了这篇博客&#xff0c;觉得ensp启动路由器的时候一直出现&#xff03;号是因为winpcap安装的时候出现的问题。查看自己的winpcap安装成功之后的目录是&#xff1a; 然后因为那篇…...

时间序列预测:深度学习、机器学习、融合模型、创新模型实战案例(附代码+数据集+原理介绍)

本文介绍->给大家推荐一下我的时间序列预测实战专栏&#xff0c;本专栏平均质量分98分&#xff0c;而且本专栏目前免费阅读。其中涉及机器学习、深度学习、融合模型、个人创新模型、数据分析等一系列有关时间序列的内容&#xff0c;其中的实战案例不仅有简单的模型类似于机器…...

docker安装RocketMQ

1、RocketMQ基本概念 1.1 消息模型&#xff08;Message Model&#xff09; RocketMQ主要由Producer、Broker、Consumer三部分组成&#xff0c;其中Producer负责生产消息&#xff0c;Consumer负责消费消息&#xff0c;Broker负责存储消息。Broker在实际部署过程中对应一台服务…...

优秀智慧园区案例 - 珠海华发智慧园区,万字长文解析先进智慧园区建设方案经验

一、项目背景 珠海华发产业园运营管理有限公司&#xff08;简称“产业园公司”&#xff09;是2016年起连续五年跻身“中国企业500强”、国务院国企改革“双百企业”的珠海华发集团旗下的实体产业发展载体运营平台&#xff0c;依托“四园一基地”&#xff1a;中以国际产业园、信…...

毕业设计项目:基于java+springboot的共享单车信息网站

运行环境 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09; 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Ma…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...