横向滚动导航

 

 实现：

方法1：

html结构

<div class="tab-nav">
                        <div class="nav-box">
                            <div class="nav-tab-item on">Intel</div>
                            <div class="nav-tab-item">Microsoft</div>
                            <div class="nav-tab-item">Nutanix</div>
                            <div class="nav-tab-item"> VMware</div>
                            <div class="nav-tab-item"> Broadcom</div>
                            <div class="nav-tab-item"> SUSE</div>
                            <div class="nav-tab-item"> RedHat</div>
                            <div class="nav-tab-item">Mellanox</div>
                        </div>
                    </div>

css

.tab-nav{
    position: relative;
  
    width: 650*@fs1;
    overflow-x: scroll;
    overflow-y: hidden;
    .nav-box{
      white-space:nowrap
    }
    .nav-tab-item{
      font-size: 24*@fs1;
      position: relative;
      display: inline-block;//white-space:nowrap 对块级元素不起作用 
      color: #666666;
      margin-right: 40*@fs1;
      padding: 20*@fs1 0;
      // float: left; white-space:nowrap 对块级元素不起作用  所以不能用浮动
      &:before{
        display: none;
      content:'';
      position: absolute;
      bottom: 0;
      left: 50%;
      margin-left: -20*@fs1;
       width: 40*@fs1;
       height: 5*@fs1;
       background: #1740b0;
      }
      &:after{
        display: none;
        content:'';
        position: absolute;
        bottom: 5*@fs1;
        left: 50%;
        border: 6*@fs1 solid transparent;
        border-bottom-color: #1740b0;
        margin-left: -6*@fs1;
      }
      &.on{
        color: #000033;
        &:before{
          display: block;
        }
        &:after{
          display: block;
        }
      }
    }
    .line{
      position: absolute;
    }
  }