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个回答

test
2024-07-02
直接标签添加 margin-bottom
就好了。
另外第二行开始的每一项标签左侧都有空白的问题,你也可以把 margin-left
变更为 margin-right
这样就没有问题了,只是如果正好最后一项的 width
加上你设置的 margin-righr
溢出了就会折行。
如果是 flex
布局,可以使用 gap
属性来做子项的间隔,具体可以参考我写的这篇笔记 在 Flex 布局中使用 gap 属性,我认为这样是比较好的解决方案。
回复

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