当前位置: 首页 > Web前端 > HTML

不用怕用不上!CSSListItem布局技巧

时间:2023-04-02 22:18:15 HTML

编者注:为了不介绍HTML标签本身的样式,本文不考虑HTML语义的提升,从而使文字和示例代码更加简洁。这是文章写作要求,不是代码风格演示。在开发中,我们经常会遇到列表如何显示的问题,例如:图片选择器列表人事部门选择列表工作状态列表通用方法为了让它看起来更舒适美观,我们通常会在每个列表项上加一个边距——right和margin-bottom属性将它们分开,一行超过容器长度后换行那么在各种情况下,如何处理列表项中的margin-right和margin-bottom,使得列表间隔和行打破看起来更自然和美丽是本文的重点。布局元素在各种情况下的宽度已知,即每一行的最大行数已知,所有元素都在一个容器中。思路:item在一个container里,每隔三分之一去掉margin-right,最后Three取消margin-bottom(最后一行小于3不影响)关键代码已知宽度,最多放三个

已知宽度,最多放三个
已知宽度,最多三个
...
运行截图的完整代码:元素的宽度已知,所有元素都在一个容器中。元素的宽度已知或未知,元素根据行数在相应的容器中。思路:最后一个容器去掉margin-bottom,最后一个item去掉magin-right键码运行截图完整代码:元素宽度已知或未知,根据行数未知对应容器元素的宽度,即不知道一行的最大数量,所有元素都在一个容器中。flex布局中常见的方法一:flex布局思路:利用flex布局的justify-contentaxis属性来控制元素的间距缺点:flex虽然强大,但是面对可变长度的列表项的布局还是不能满足要求。关键代码两个可以排成一行两个可以排成一行这三个字单独一行,一行一行,一行一行两个可以组成一排四个运行截图完整代码:方法二:元素宽度未知,所有元素都在一个容器中总结使用css3属性帮助我们更好的布局列表,避免使用js控制列表项,使css和js解耦,更有利于项目维护。以上可能无法涵盖所有??情况。欢迎提出或分享其他更好的解决方案。文章/Lawler61Learnandtolearn.Github:https://github.com/Lawler61作者博客:www.freeze61.me/yingsheng本文经创宇前端作者授权,版权归作者所有。转载本文请注明出处。文章链接:https://knownsec-fed.com/2018...想订阅知道创宇更多分享,欢迎搜索关注我们微信公众号:知道创宇(KnownsecFED)。欢迎留言讨论,我们会尽量回复。欢迎点赞、收藏、评论、转发、分享和打赏支持我们。提示将全部转给文章作者。谢谢阅读。