问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
小七哥
    404286183

    如下图：

    看那些灰色字体的一部分，这是展示搜索历史的，我现在对他们的样式设置的 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 值的，这样会让界面变得不够和谐，不是我期望的结果。

    前端html5javascriptcsscss3
    阅读 3.8k
    8 个回答
    得票最新
    头像
    陟上晴明
      21.7k145191
      ✓ 已被采纳

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

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

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

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

      头像
      (ಡωಡ)hiahiahia
        8331313
        假设本来上一行设置的是margin-bottom: 15px;由于现在我用了margin-top:6px;所以把上一行设置的margin-bottom: 15px改为margin-bottom: 9px就可以了

        image.png

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    .sklist span{
        display: inline-block;
        margin: 6px 0 0 6px;
        background: #ccc;
    }
    .sklist span:first-child {
        margin-left: 0px;
    }
    </style>
</head>
<body>
<div id="sklist" class="sklist">
    <span>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>
</body>
</html>
        头像
        重新出发
          2
          新手上路，请多包涵

          <span>标签设置margin-bottom，其父元素设置padding

          头像
          香芋好好吃
            34014
            <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #sklist {
      width: 200px;
      border: 1px solid red;
      margin-bottom: -20px;
    }
    #sklist span {
      display: inline-block;
      margin-right: 5px;
      margin-bottom: 20px;
      background: #ddd;
    }
  </style>
</head>
<body>
  <p style="background: #eee;">填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容</p>
  <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>
  <p style="background: #eee;">填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容填充内容</p>
</body>
</html>

            这里如果列表内容为空，需要将列表隐藏或者不显示，不然多出 margin-bottom: -20;

            头像
            鸡翅虎QAQ
              13713

              看了 bootstrap 的源码才知道怎么优雅地解决这个问题. css的选择器 span + sapn { ... }

              .sklist span{
  display: inline-block;
  margin-top: 6px;
  background: #ccc;
}
    
.sklist span + span {
  margin-left: 6px;
}

              https://codepen.io/edk24/pen/...

              头像
              BetaZhang
                41
                新手上路，请多包涵

                Keywords: flex flex-wrap gap
                Code:

                #sklist{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
                头像
                心流
                  122
                  头像
                  陟上晴明
                    21.7k145191
                    .sklist{
    display:flex;
    flex-wrap:wrap;
    // 设置交叉轴多行的排列情况
    align-content:center;
}
                    头像
                    周杨
                      29115

                      建议用 flex 或者 grid 布局，通过 gap 的方式来解决

                      撰写回答
                      你尚未登录，登录后可以
                      • 和开发者交流问题的细节
                      • 关注并接收问题和回答的更新提醒
                      • 参与内容的编辑和改进，让解决方法与时俱进
                      推荐问题