不怕你用不上！CSS 列表项布局技巧

sumory 发布于2019-08-30 15:54 / 3580人阅读

摘要：编者按为了不引入标签自身的样式，本文未考虑语义化的提倡，以使得行文与示例代码更加简洁。这是文章写作需要，而非代码风格示范。欢迎注明出处转载本文。欢迎点赞收藏留言评论转发分享和打赏支持我们。打赏将被完全转交给文章作者。

编者按：

为了不引入 HTML 标签自身的样式，本文未考虑 HTML 语义化的提倡，以使得行文与示例代码更加简洁。这是文章写作需要，而非代码风格示范。

在开发中我们经常会遇到关于如何展示列表的问题，例如：

图片选择器列表

人员部门选择列表

工作状态列表

通用方法

为了让其看起来更加舒适美观，通常我们会在每个列表项上添加 margin-right 和 margin-bottom 属性来隔开它们，然后一行超过容器长度后进行换行

那么在各种情况下，如何处理列表项中margin-right和margin-bottom，让列表间隔和换行看起来更加自然美观是本篇的重点

各种情况下的布局 元素宽度已知，即知道每行最多多少个，且所有元素都在一个容器中

思路：item 在一个容器中，每第三个去掉 margin-right，最后三个取消 margin-bottom（如最后一行不满 3 个也不影响）

关键代码


  宽度已知，最多放三个
  宽度已知，最多放三个
  宽度已知，最多放三个
  ...

运行截图

完整代码：元素宽度已知，所有元素都在一个容器

元素宽度已知或未知，且元素按照行数在相应容器中

思路：最后一个 container 去掉 margin-bottom，最后一个 item 去掉 magin-right

关键代码

运行截图

完整代码：元素宽度已知或未知，且按照行数在相应容器

元素宽度未知，即不知道一行最多多少个，且所有元素都在一个容器中，常见于 flex 布局 法1：Flex 布局

思路：利用 flex 布局的 justify-content 主轴属性来控制元素的间距

缺点：flex 虽然强大，但是面对长度不定的列表项布局还是不能很好满足要求

关键代码


  两个可以成一行
  两个可以成一行
  这三个字
  独成一行呀独成一行呀独成一行呀独成
  两个才能成一行呀
  四个

运行截图

完整代码：法2：元素宽度未知，且所有元素都在一个容器

总结

多多利用 css3 属性来帮助我们更好的布局列表，避免使用 js 控制列表项，做到 css 与 js 解耦，更利于项目的维护

以上可能未包含所有情况，欢迎提出或者分享其他更好的解决办法

文 / Lawler61
Learn and to learn.
Github：https://github.com/lawler61
作者博客：www.freeze61.me

编 / 荧声

本文由创宇前端作者授权发布，版权属于作者，创宇前端出品。欢迎注明出处转载本文。文章链接：https://knownsec-fed.com/2018...

想要订阅更多来自知道创宇开发一线的分享，请搜索关注我们的微信公众号：创宇前端（KnownsecFED）。欢迎留言讨论，我们会尽可能回复。

欢迎点赞、收藏、留言评论、转发分享和打赏支持我们。打赏将被完全转交给文章作者。

感谢您的阅读。

GPU云服务器云服务器列表项 html孙列表项列表项php代码 css技巧

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117079.html

不怕你用不上！CSS 列表项布局技巧

摘要：编者按为了不引入标签自身的样式，本文未考虑语义化的提倡，以使得行文与示例代码更加简洁。这是文章写作需要，而非代码风格示范。欢迎注明出处转载本文。欢迎点赞收藏留言评论转发分享和打赏支持我们。打赏将被完全转交给文章作者。编者按：为了不引入 HTML 标签自身的样式，本文未考虑 HTML 语义化的提倡，以使得行文与示例代码更加简洁。这是文章写作需要，而非代码风格示范。 showImg(h...

cncoder 2019-08-02 13:55 评论0 收藏0
CSS伪类伪元素详解

摘要：选择器大致可以分成类基本选择器，层次选择器，属性选择器，伪类，伪元素。但伪类和伪元素相对比较抽象，稍微有一点点理解上的难度。本篇就是我对伪类和伪元素的理解。 CSS选择器大致可以分成5类：基本选择器，层次选择器，属性选择器，伪类，伪元素。基本，层次，属性选择器比较容易理解，毕竟它们选择的对象都属于DOM中看得见摸得着的元素。但伪类和伪元素相对比较抽象，稍微有一点点理解上的难度。本篇就是...

lookSomeone 2019-08-29 11:09 评论0 收藏0
常用的八款免费程序员喜欢的代码编辑器推荐「你用哪个」

摘要：作为程序员的你，平时使用哪款代码编辑器呢作为我们工作效率工具，在这篇文章中老蒋准备整理个常用且免费的代码编辑器。老蒋也有在个人喜欢的轻量级代码编辑器介绍到。原本老蒋打算整理款编辑器的，但是一般我们估计也用不上这么多。我们每个人心目中肯定有自己认为值得拥有的代码编辑器。作为程序员的你，平时使用哪款代码编辑器呢？作为我们工作效率工具，在这篇文章中老蒋准备整理8个常用且免费的代码编辑器。看看其中有...

xiaolinbang 2021-09-27 14:01 评论0 收藏0
DIV+CSS学习笔记总结篇

摘要：每个列表项始于标签。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。标签的属性应当与相关元素的属性相同。姓名性别姓名性别单元格标签可以定义表格中的一个单元格，表示一个单元格。第一部分 HTML 第一章职业规划和前景职业方向规划定位： web前端开发工程师 web网站架构师自己创业转岗管理或其他 web前端开发的前景展望：未来IT行业企业需求...

HackerShell 2019-08-01 15:41 评论0 收藏0