css或者js如何判断一堆span标签垂直方向上不在第一行?

作者站长头像
站长
· 阅读数 9

如下图:

css或者js如何判断一堆span标签垂直方向上不在第一行?

看那些灰色字体的一部分,这是展示搜索历史的,我现在对他们的样式设置的 margin 只有margin-left:6px,第一个的 margin-left 的值是0,这个好解决,但是一旦换行之后第二行和第一行的内容就贴着了,我想请问能否智能实现当 span 标签到第二行去了自动给第二行的 span 标签加上margin-top 值呢?谢谢。

目前代码结构如下:

<div id="sklist">
<span class="ml0">3</span>
<span>2</span>
<span>1</span>
<span>88888</span>
<span>oooadf</span>
<span>ooo</span>
<span>faff5555</span>
<span>faff</span>
<span>666</span>
<span>红包</span>
<span>aaa</span>
<span>test3</span>
</div>

我看很多大神都说增加 marginTop 或者 marginBottom ,但是这样会存在一个问题,就是它会和上面下面撑开了一段距离,而 id="sklist" 这个 div 本身有 marginTop 和 marginBottom 值的,这样会让界面变得不够和谐,不是我期望的结果。

回复
1个回答
avatar
test
2024-07-02

直接标签添加 margin-bottom 就好了。

另外第二行开始的每一项标签左侧都有空白的问题,你也可以把 margin-left 变更为 margin-right 这样就没有问题了,只是如果正好最后一项的 width 加上你设置的 margin-righr 溢出了就会折行。

如果是 flex 布局,可以使用 gap 属性来做子项的间隔,具体可以参考我写的这篇笔记 在 Flex 布局中使用 gap 属性,我认为这样是比较好的解决方案。

flex布局使用gap属性设置子项间距的Demo

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容