首页 > 其他分享 >li标签做成三列,怎么自动调整宽度?

li标签做成三列,怎么自动调整宽度?

时间:2024-10-11 17:18:39浏览次数:10  
标签:flex 标签 三列 li Item 宽度 移除

要使li标签做成三列并自动调整宽度,可以使用CSS的Flexbox或Grid布局。

以下是使用Flexbox的示例代码:

HTML:

<ul class="columns">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <!-- ... 更多的列表项 ... -->
</ul>

CSS:

.columns {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none; /* 移除列表的标记 */
  padding: 0; /* 移除默认的内边距 */
}
 
.columns li {
  flex: 1; /* 让所有列占据等分的空间 */
  margin: 5px; /* 添加外边距 */
  box-sizing: border-box; /* 确保边距不会导致宽度增加 */
  break-inside: avoid; /* 避免在分页时将项目分开 */
  min-width: 200px; /* 设置最小宽度,防止过度缩小 */

这段代码会创建一个三列的布局,每列的宽度会自动调整以填满可用空间。如果你想要确保列表项至少有一定的宽度,可以使用min-width属性。使用flex: 1;确保列会均分空间,如果有多余的空间,可以通过设置margin来调整列之间的间距。 

标签:flex,标签,三列,li,Item,宽度,移除
From: https://blog.csdn.net/m0_64676758/article/details/142859174

相关文章

  • arm Linux中dma的cache管理
    概述前两周有人询问DMA下的cache操作和dma-coherent。以前零碎看过代码。临时找,还没有找到。这两天整理了调用流程,也找到了dma-coherent的用法。Linux的文档里没有详细说明dma-coherent的用法。根据代码,如果dma的设备树里有dma-coherent,Linux则认为硬件会维护cache一致性,不会在d......
  • Sublime
    激活快捷键Alt+F3查找内容全部选择,可以统一替换或手动修改......
  • Auxiliary Learning by Implicit Differentiation
    目录概AuxiLearn问题设定理解两阶段的训练代码NavonA.,AchituveI.,MaronH.,ChechikG.andFetayaE.Auxiliarylearningbyimplicitdifferentiation.ICLR,2021.概通过implicitdifferentiation优化一些敏感的参数.AuxiLearn在实际的训练中,我们常常会通过......
  • 实现与PDF进行聊天!(利用 Pinata、OpenAI 和 Streamlit等技术)
    最近在GitHub上发现一个有趣的项目,由用户@Jagroop2001开发的【chat-with-pdf】这个project!我为此项目写了一个介绍和readme,感兴趣的可以点击链接:https://github.com/Hyone-soul/chat-with-pdf/在本教程中,我们将构建一个简单的聊天界面,允许用户上传PDF文件,使用OpenAI的AP......
  • Flutter可滚动组件(1):Sliver
    一、常见滚定组件Flutter提供了多种滚动组件,可以用于处理各种滚动效果。Sliver的子组件都能滚动,但并不是所有能滚动的组件都是Sliver子组件。比如,ListView和Grid就不是Sliver子组件。重要说3遍ListView和Grid就不是Sliver子组件。ListView和Grid就不是Sliver子组件。......
  • Flutter可滚动组件(8):CustomScrollView 和 Slivers
    CustomScrollView前面介绍的ListView、GridView、PageView都是一个完整的可滚动组件,所谓完整是指它们都包括Scrollable、Viewport和Sliver。假如我们想要在一个页面中,同时包含多个可滚动组件,且使它们的滑动效果能统一起来,比如:我们想将已有的两个沿垂直方向滚动的ListView......
  • 2024 最新 IntelliJ IDEA 2024.1.6 激活(亲测可用)
    注意:接下来本文分享免费激活 IDEA 等Jetbrains全家桶工具,一直支持到最新版本2024.1.6。 1.下载安装IDEA (mac、window、linux都支持)大家直接在官网下载最新版本,登陆官网,下载最新版本2024.1.4。一步一步确定安装,然后打开这里提示输入激活码,先关闭应用!!!2.下载激活工具打......
  • Flutter布局(5):对齐与居中布局(Align、Center)
    在Flutter中,布局是构建用户界面的重要组成部分。Align和Center是两个常用的布局组件,它们都用于在父组件中对子组件进行对齐和居中。本篇博客将详细介绍Align和Center的用法、属性和适用场景,帮助你更好地理解和运用它们。一、Align:精准对齐,掌握位置Align组件用于将子组......
  • 雾霾下雨天气户外人像街景拍摄Lr后期调色,手机滤镜PS+Lightroom预设下载!
    调色详情在雾霾下雨天气下拍摄的户外人像街景往往具有一种独特的氛围。通过Lightroom进行后期调色,可以进一步强化这种氛围,使照片更加富有情感和艺术感。预设信息调色风格:灰调风格预设适合类型:人像,雾霾,雨天,户外,街景等预设格式:XMP+DNG手机滤镜资源编号:00776支持软件:Lightro......
  • GD32F303移植FreeRTOS-Plus-CLI
    FreeRTOS移植好是没有命令行交互的,刚好系统提供了相关的代码,那么就方便多了。示例基于FreeRTOS-Kernel-9.0.0.zip,再次之前需要把系统移植完毕。移植FreeRTOS-Plus-CLI需要干好几件事串口初始化串口终端服务函数添加自己定制的命令下面讲添加哪些文件新建一个分组,放CLI相......