小笔记2

来源：互联网发布：计算机通信与网络 pdf 编辑：程序博客网时间：2024/06/05 00:43

1、css (标红的可以实现滚动效果，并且每次push到selected中的元素在可视范围右侧显示)

.filterSelected{  width:100%;  height:45*@xem;  line-height:45*@xem;  background:#f5f5f5;  color:#bbbbbb;  text-align:center;  z-index:1;  position:relative;  .selected{

    padding-left:10*@xem;
    overflow-x: auto;                 ／／控制横向滚动

    overflow-y: hidden;

    white-space: nowrap;            ／／不换行，滚动

    position: absolute;             ／／控制元素在可视范围右侧

    right: 0;

    text-align:left;               ／／元素个数总宽度小于100%；居左显示
    min-width: 100%;

    span{

        border:1px solid #ccc;

        padding:0 20*@xem 0 5*@xem;

        height:24*@xem;

        line-height:24*@xem;

        background:#fff;

        color:#333;

        display:inline-block;

        margin-right:5*@xem;

        position:relative;

        &:after{

            content:'';

            background: url("../../img/close.png") no-repeat center center;

            background-size:cover;

            width:10*@xem;

            height:10*@xem;

            display: inline-block;

            position:absolute;

            top:7*@xem;

            right:5*@xem;

0 0