css - 较少循环遍历数组会不断附加先前的值

标签 css loops less media-queries

我正在尝试为我的 CSS 创建生成的间距类。 我有一些嵌入式循环来创建它，在我的外循环中，我定义了我的媒体查询。我有一组内部样式，它们被循环遍历并放置在 3 个媒体查询中的每一个中。

出于某种原因，当媒体查询被循环时，它会添加先前的变量并为每个媒体查询附加“和”，所以我的页面看起来像这样:

@media (max-width: 991px) {...}
@media (max-width: 991px) and (max-width: 767px) {...}
@media (max-width: 991px) and (max-width: 767px) and (max-width: 480px) {...}

什么时候应该是这样的:

@media (max-width: 991px) {...}
@media (max-width: 767px) {...}
@media (max-width: 480px) {...}

我已经添加了其他 CSS 属性来代替 @media 以查看它是否是 @media 的问题，但它似乎仍然在我的环形。 (仅供引用，我使用的是 Less 版本 3.0)

较少

@screen-xs-min: 480px;
@screen-sm-min: 768px;
@screen-md-min: 992px;
@screen-lg-min: 1200px;
@screen-xl-min: 1340px;

@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);

@directionlist: l, b, r, t;
@directions: left, bottom, right, top;
@spacingtype: padding, margin;
@sapcingtypeabv: p, m;
@responsivevars: screen-xs-min, screen-xs-max, screen-sm-max;
@responsivevarsabv: xs, sm, md;

@maxg: 3;
.g-loop (@g) when (@g > 0) {

    @responsive: extract(@responsivevars, @g);
    @responsiveabv: extract(@responsivevarsabv, @g);

    @media (max-width: @@responsive) {

    @maxh: 2;
    .h-loop (@h) when (@h > 0) {

        @maxi: 50;
        .i-loop (@i) when (@i > -1) {

            @maxj: 4;
            .j-loop (@j) when (@j > 0) {

                @direction: extract(@directionlist, @j);
                @directionname: extract(@directions, @j);
                @type: extract(@spacingtype, @h);
                @typeabv: extract(@sapcingtypeabv, @h);

                .@{typeabv}-@{responsiveabv}-@{direction}-@{i} {
                    @{type}-@{directionname}: @i*1px !important;
                }

                .j-loop(@j - 1);
            }

            .j-loop (0) {}
            .j-loop(@maxj);

            .i-loop(@i - 5);
        }

        .i-loop (0) {}
        .i-loop(@maxi);
        .h-loop(@h - 1);
    }

    .h-loop (0) {}
    .h-loop(@maxh);
    .g-loop(@g - 1);
    } //Closing Media Query
}

.g-loop (0) {}
.g-loop(@maxg);

可以使用 LESS Tester查看编译结果.

生成的 CSS

@media (max-width: 991px) {
  .m-md-t-50 {
    margin-top: 50px !important;
  }
  .m-md-r-50 {
    margin-right: 50px !important;
  }
  .m-md-b-50 {
    margin-bottom: 50px !important;
  }
  .m-md-l-50 {
    margin-left: 50px !important;
  }
  .m-md-t-45 {
    margin-top: 45px !important;
  }
  .m-md-r-45 {
    margin-right: 45px !important;
  }
  .m-md-b-45 {
    margin-bottom: 45px !important;
  }
  .m-md-l-45 {
    margin-left: 45px !important;
  }
  .m-md-t-40 {
    margin-top: 40px !important;
  }
  .m-md-r-40 {
    margin-right: 40px !important;
  }
  .m-md-b-40 {
    margin-bottom: 40px !important;
  }
  .m-md-l-40 {
    margin-left: 40px !important;
  }
  .m-md-t-35 {
    margin-top: 35px !important;
  }
  .m-md-r-35 {
    margin-right: 35px !important;
  }
  .m-md-b-35 {
    margin-bottom: 35px !important;
  }
  .m-md-l-35 {
    margin-left: 35px !important;
  }
  .m-md-t-30 {
    margin-top: 30px !important;
  }
  .m-md-r-30 {
    margin-right: 30px !important;
  }
  .m-md-b-30 {
    margin-bottom: 30px !important;
  }
  .m-md-l-30 {
    margin-left: 30px !important;
  }
  .m-md-t-25 {
    margin-top: 25px !important;
  }
  .m-md-r-25 {
    margin-right: 25px !important;
  }
  .m-md-b-25 {
    margin-bottom: 25px !important;
  }
  .m-md-l-25 {
    margin-left: 25px !important;
  }
  .m-md-t-20 {
    margin-top: 20px !important;
  }
  .m-md-r-20 {
    margin-right: 20px !important;
  }
  .m-md-b-20 {
    margin-bottom: 20px !important;
  }
  .m-md-l-20 {
    margin-left: 20px !important;
  }
  .m-md-t-15 {
    margin-top: 15px !important;
  }
  .m-md-r-15 {
    margin-right: 15px !important;
  }
  .m-md-b-15 {
    margin-bottom: 15px !important;
  }
  .m-md-l-15 {
    margin-left: 15px !important;
  }
  .m-md-t-10 {
    margin-top: 10px !important;
  }
  .m-md-r-10 {
    margin-right: 10px !important;
  }
  .m-md-b-10 {
    margin-bottom: 10px !important;
  }
  .m-md-l-10 {
    margin-left: 10px !important;
  }
  .m-md-t-5 {
    margin-top: 5px !important;
  }
  .m-md-r-5 {
    margin-right: 5px !important;
  }
  .m-md-b-5 {
    margin-bottom: 5px !important;
  }
  .m-md-l-5 {
    margin-left: 5px !important;
  }
  .m-md-t-0 {
    margin-top: 0px !important;
  }
  .m-md-r-0 {
    margin-right: 0px !important;
  }
  .m-md-b-0 {
    margin-bottom: 0px !important;
  }
  .m-md-l-0 {
    margin-left: 0px !important;
  }
  .p-md-t-50 {
    padding-top: 50px !important;
  }
  .p-md-r-50 {
    padding-right: 50px !important;
  }
  .p-md-b-50 {
    padding-bottom: 50px !important;
  }
  .p-md-l-50 {
    padding-left: 50px !important;
  }
  .p-md-t-45 {
    padding-top: 45px !important;
  }
  .p-md-r-45 {
    padding-right: 45px !important;
  }
  .p-md-b-45 {
    padding-bottom: 45px !important;
  }
  .p-md-l-45 {
    padding-left: 45px !important;
  }
  .p-md-t-40 {
    padding-top: 40px !important;
  }
  .p-md-r-40 {
    padding-right: 40px !important;
  }
  .p-md-b-40 {
    padding-bottom: 40px !important;
  }
  .p-md-l-40 {
    padding-left: 40px !important;
  }
  .p-md-t-35 {
    padding-top: 35px !important;
  }
  .p-md-r-35 {
    padding-right: 35px !important;
  }
  .p-md-b-35 {
    padding-bottom: 35px !important;
  }
  .p-md-l-35 {
    padding-left: 35px !important;
  }
  .p-md-t-30 {
    padding-top: 30px !important;
  }
  .p-md-r-30 {
    padding-right: 30px !important;
  }
  .p-md-b-30 {
    padding-bottom: 30px !important;
  }
  .p-md-l-30 {
    padding-left: 30px !important;
  }
  .p-md-t-25 {
    padding-top: 25px !important;
  }
  .p-md-r-25 {
    padding-right: 25px !important;
  }
  .p-md-b-25 {
    padding-bottom: 25px !important;
  }
  .p-md-l-25 {
    padding-left: 25px !important;
  }
  .p-md-t-20 {
    padding-top: 20px !important;
  }
  .p-md-r-20 {
    padding-right: 20px !important;
  }
  .p-md-b-20 {
    padding-bottom: 20px !important;
  }
  .p-md-l-20 {
    padding-left: 20px !important;
  }
  .p-md-t-15 {
    padding-top: 15px !important;
  }
  .p-md-r-15 {
    padding-right: 15px !important;
  }
  .p-md-b-15 {
    padding-bottom: 15px !important;
  }
  .p-md-l-15 {
    padding-left: 15px !important;
  }
  .p-md-t-10 {
    padding-top: 10px !important;
  }
  .p-md-r-10 {
    padding-right: 10px !important;
  }
  .p-md-b-10 {
    padding-bottom: 10px !important;
  }
  .p-md-l-10 {
    padding-left: 10px !important;
  }
  .p-md-t-5 {
    padding-top: 5px !important;
  }
  .p-md-r-5 {
    padding-right: 5px !important;
  }
  .p-md-b-5 {
    padding-bottom: 5px !important;
  }
  .p-md-l-5 {
    padding-left: 5px !important;
  }
  .p-md-t-0 {
    padding-top: 0px !important;
  }
  .p-md-r-0 {
    padding-right: 0px !important;
  }
  .p-md-b-0 {
    padding-bottom: 0px !important;
  }
  .p-md-l-0 {
    padding-left: 0px !important;
  }
}
@media (max-width: 991px) and (max-width: 767px) {
  .m-sm-t-50 {
    margin-top: 50px !important;
  }
  .m-sm-r-50 {
    margin-right: 50px !important;
  }
  .m-sm-b-50 {
    margin-bottom: 50px !important;
  }
  .m-sm-l-50 {
    margin-left: 50px !important;
  }
  .m-sm-t-45 {
    margin-top: 45px !important;
  }
  .m-sm-r-45 {
    margin-right: 45px !important;
  }
  .m-sm-b-45 {
    margin-bottom: 45px !important;
  }
  .m-sm-l-45 {
    margin-left: 45px !important;
  }
  .m-sm-t-40 {
    margin-top: 40px !important;
  }
  .m-sm-r-40 {
    margin-right: 40px !important;
  }
  .m-sm-b-40 {
    margin-bottom: 40px !important;
  }
  .m-sm-l-40 {
    margin-left: 40px !important;
  }
  .m-sm-t-35 {
    margin-top: 35px !important;
  }
  .m-sm-r-35 {
    margin-right: 35px !important;
  }
  .m-sm-b-35 {
    margin-bottom: 35px !important;
  }
  .m-sm-l-35 {
    margin-left: 35px !important;
  }
  .m-sm-t-30 {
    margin-top: 30px !important;
  }
  .m-sm-r-30 {
    margin-right: 30px !important;
  }
  .m-sm-b-30 {
    margin-bottom: 30px !important;
  }
  .m-sm-l-30 {
    margin-left: 30px !important;
  }
  .m-sm-t-25 {
    margin-top: 25px !important;
  }
  .m-sm-r-25 {
    margin-right: 25px !important;
  }
  .m-sm-b-25 {
    margin-bottom: 25px !important;
  }
  .m-sm-l-25 {
    margin-left: 25px !important;
  }
  .m-sm-t-20 {
    margin-top: 20px !important;
  }
  .m-sm-r-20 {
    margin-right: 20px !important;
  }
  .m-sm-b-20 {
    margin-bottom: 20px !important;
  }
  .m-sm-l-20 {
    margin-left: 20px !important;
  }
  .m-sm-t-15 {
    margin-top: 15px !important;
  }
  .m-sm-r-15 {
    margin-right: 15px !important;
  }
  .m-sm-b-15 {
    margin-bottom: 15px !important;
  }
  .m-sm-l-15 {
    margin-left: 15px !important;
  }
  .m-sm-t-10 {
    margin-top: 10px !important;
  }
  .m-sm-r-10 {
    margin-right: 10px !important;
  }
  .m-sm-b-10 {
    margin-bottom: 10px !important;
  }
  .m-sm-l-10 {
    margin-left: 10px !important;
  }
  .m-sm-t-5 {
    margin-top: 5px !important;
  }
  .m-sm-r-5 {
    margin-right: 5px !important;
  }
  .m-sm-b-5 {
    margin-bottom: 5px !important;
  }
  .m-sm-l-5 {
    margin-left: 5px !important;
  }
  .m-sm-t-0 {
    margin-top: 0px !important;
  }
  .m-sm-r-0 {
    margin-right: 0px !important;
  }
  .m-sm-b-0 {
    margin-bottom: 0px !important;
  }
  .m-sm-l-0 {
    margin-left: 0px !important;
  }
  .p-sm-t-50 {
    padding-top: 50px !important;
  }
  .p-sm-r-50 {
    padding-right: 50px !important;
  }
  .p-sm-b-50 {
    padding-bottom: 50px !important;
  }
  .p-sm-l-50 {
    padding-left: 50px !important;
  }
  .p-sm-t-45 {
    padding-top: 45px !important;
  }
  .p-sm-r-45 {
    padding-right: 45px !important;
  }
  .p-sm-b-45 {
    padding-bottom: 45px !important;
  }
  .p-sm-l-45 {
    padding-left: 45px !important;
  }
  .p-sm-t-40 {
    padding-top: 40px !important;
  }
  .p-sm-r-40 {
    padding-right: 40px !important;
  }
  .p-sm-b-40 {
    padding-bottom: 40px !important;
  }
  .p-sm-l-40 {
    padding-left: 40px !important;
  }
  .p-sm-t-35 {
    padding-top: 35px !important;
  }
  .p-sm-r-35 {
    padding-right: 35px !important;
  }
  .p-sm-b-35 {
    padding-bottom: 35px !important;
  }
  .p-sm-l-35 {
    padding-left: 35px !important;
  }
  .p-sm-t-30 {
    padding-top: 30px !important;
  }
  .p-sm-r-30 {
    padding-right: 30px !important;
  }
  .p-sm-b-30 {
    padding-bottom: 30px !important;
  }
  .p-sm-l-30 {
    padding-left: 30px !important;
  }
  .p-sm-t-25 {
    padding-top: 25px !important;
  }
  .p-sm-r-25 {
    padding-right: 25px !important;
  }
  .p-sm-b-25 {
    padding-bottom: 25px !important;
  }
  .p-sm-l-25 {
    padding-left: 25px !important;
  }
  .p-sm-t-20 {
    padding-top: 20px !important;
  }
  .p-sm-r-20 {
    padding-right: 20px !important;
  }
  .p-sm-b-20 {
    padding-bottom: 20px !important;
  }
  .p-sm-l-20 {
    padding-left: 20px !important;
  }
  .p-sm-t-15 {
    padding-top: 15px !important;
  }
  .p-sm-r-15 {
    padding-right: 15px !important;
  }
  .p-sm-b-15 {
    padding-bottom: 15px !important;
  }
  .p-sm-l-15 {
    padding-left: 15px !important;
  }
  .p-sm-t-10 {
    padding-top: 10px !important;
  }
  .p-sm-r-10 {
    padding-right: 10px !important;
  }
  .p-sm-b-10 {
    padding-bottom: 10px !important;
  }
  .p-sm-l-10 {
    padding-left: 10px !important;
  }
  .p-sm-t-5 {
    padding-top: 5px !important;
  }
  .p-sm-r-5 {
    padding-right: 5px !important;
  }
  .p-sm-b-5 {
    padding-bottom: 5px !important;
  }
  .p-sm-l-5 {
    padding-left: 5px !important;
  }
  .p-sm-t-0 {
    padding-top: 0px !important;
  }
  .p-sm-r-0 {
    padding-right: 0px !important;
  }
  .p-sm-b-0 {
    padding-bottom: 0px !important;
  }
  .p-sm-l-0 {
    padding-left: 0px !important;
  }
}
@media (max-width: 991px) and (max-width: 767px) and (max-width: 480px) {
  .m-xs-t-50 {
    margin-top: 50px !important;
  }
  .m-xs-r-50 {
    margin-right: 50px !important;
  }
  .m-xs-b-50 {
    margin-bottom: 50px !important;
  }
  .m-xs-l-50 {
    margin-left: 50px !important;
  }
  .m-xs-t-45 {
    margin-top: 45px !important;
  }
  .m-xs-r-45 {
    margin-right: 45px !important;
  }
  .m-xs-b-45 {
    margin-bottom: 45px !important;
  }
  .m-xs-l-45 {
    margin-left: 45px !important;
  }
  .m-xs-t-40 {
    margin-top: 40px !important;
  }
  .m-xs-r-40 {
    margin-right: 40px !important;
  }
  .m-xs-b-40 {
    margin-bottom: 40px !important;
  }
  .m-xs-l-40 {
    margin-left: 40px !important;
  }
  .m-xs-t-35 {
    margin-top: 35px !important;
  }
  .m-xs-r-35 {
    margin-right: 35px !important;
  }
  .m-xs-b-35 {
    margin-bottom: 35px !important;
  }
  .m-xs-l-35 {
    margin-left: 35px !important;
  }
  .m-xs-t-30 {
    margin-top: 30px !important;
  }
  .m-xs-r-30 {
    margin-right: 30px !important;
  }
  .m-xs-b-30 {
    margin-bottom: 30px !important;
  }
  .m-xs-l-30 {
    margin-left: 30px !important;
  }
  .m-xs-t-25 {
    margin-top: 25px !important;
  }
  .m-xs-r-25 {
    margin-right: 25px !important;
  }
  .m-xs-b-25 {
    margin-bottom: 25px !important;
  }
  .m-xs-l-25 {
    margin-left: 25px !important;
  }
  .m-xs-t-20 {
    margin-top: 20px !important;
  }
  .m-xs-r-20 {
    margin-right: 20px !important;
  }
  .m-xs-b-20 {
    margin-bottom: 20px !important;
  }
  .m-xs-l-20 {
    margin-left: 20px !important;
  }
  .m-xs-t-15 {
    margin-top: 15px !important;
  }
  .m-xs-r-15 {
    margin-right: 15px !important;
  }
  .m-xs-b-15 {
    margin-bottom: 15px !important;
  }
  .m-xs-l-15 {
    margin-left: 15px !important;
  }
  .m-xs-t-10 {
    margin-top: 10px !important;
  }
  .m-xs-r-10 {
    margin-right: 10px !important;
  }
  .m-xs-b-10 {
    margin-bottom: 10px !important;
  }
  .m-xs-l-10 {
    margin-left: 10px !important;
  }
  .m-xs-t-5 {
    margin-top: 5px !important;
  }
  .m-xs-r-5 {
    margin-right: 5px !important;
  }
  .m-xs-b-5 {
    margin-bottom: 5px !important;
  }
  .m-xs-l-5 {
    margin-left: 5px !important;
  }
  .m-xs-t-0 {
    margin-top: 0px !important;
  }
  .m-xs-r-0 {
    margin-right: 0px !important;
  }
  .m-xs-b-0 {
    margin-bottom: 0px !important;
  }
  .m-xs-l-0 {
    margin-left: 0px !important;
  }
  .p-xs-t-50 {
    padding-top: 50px !important;
  }
  .p-xs-r-50 {
    padding-right: 50px !important;
  }
  .p-xs-b-50 {
    padding-bottom: 50px !important;
  }
  .p-xs-l-50 {
    padding-left: 50px !important;
  }
  .p-xs-t-45 {
    padding-top: 45px !important;
  }
  .p-xs-r-45 {
    padding-right: 45px !important;
  }
  .p-xs-b-45 {
    padding-bottom: 45px !important;
  }
  .p-xs-l-45 {
    padding-left: 45px !important;
  }
  .p-xs-t-40 {
    padding-top: 40px !important;
  }
  .p-xs-r-40 {
    padding-right: 40px !important;
  }
  .p-xs-b-40 {
    padding-bottom: 40px !important;
  }
  .p-xs-l-40 {
    padding-left: 40px !important;
  }
  .p-xs-t-35 {
    padding-top: 35px !important;
  }
  .p-xs-r-35 {
    padding-right: 35px !important;
  }
  .p-xs-b-35 {
    padding-bottom: 35px !important;
  }
  .p-xs-l-35 {
    padding-left: 35px !important;
  }
  .p-xs-t-30 {
    padding-top: 30px !important;
  }
  .p-xs-r-30 {
    padding-right: 30px !important;
  }
  .p-xs-b-30 {
    padding-bottom: 30px !important;
  }
  .p-xs-l-30 {
    padding-left: 30px !important;
  }
  .p-xs-t-25 {
    padding-top: 25px !important;
  }
  .p-xs-r-25 {
    padding-right: 25px !important;
  }
  .p-xs-b-25 {
    padding-bottom: 25px !important;
  }
  .p-xs-l-25 {
    padding-left: 25px !important;
  }
  .p-xs-t-20 {
    padding-top: 20px !important;
  }
  .p-xs-r-20 {
    padding-right: 20px !important;
  }
  .p-xs-b-20 {
    padding-bottom: 20px !important;
  }
  .p-xs-l-20 {
    padding-left: 20px !important;
  }
  .p-xs-t-15 {
    padding-top: 15px !important;
  }
  .p-xs-r-15 {
    padding-right: 15px !important;
  }
  .p-xs-b-15 {
    padding-bottom: 15px !important;
  }
  .p-xs-l-15 {
    padding-left: 15px !important;
  }
  .p-xs-t-10 {
    padding-top: 10px !important;
  }
  .p-xs-r-10 {
    padding-right: 10px !important;
  }
  .p-xs-b-10 {
    padding-bottom: 10px !important;
  }
  .p-xs-l-10 {
    padding-left: 10px !important;
  }
  .p-xs-t-5 {
    padding-top: 5px !important;
  }
  .p-xs-r-5 {
    padding-right: 5px !important;
  }
  .p-xs-b-5 {
    padding-bottom: 5px !important;
  }
  .p-xs-l-5 {
    padding-left: 5px !important;
  }
  .p-xs-t-0 {
    padding-top: 0px !important;
  }
  .p-xs-r-0 {
    padding-right: 0px !important;
  }
  .p-xs-b-0 {
    padding-bottom: 0px !important;
  }
  .p-xs-l-0 {
    padding-left: 0px !important;
  }
}

这是我第一次大量使用 Less 逻辑，所以如果有更好的方法请告诉我。

最佳答案

主要建议:

使用each函数代替。

既然您使用的是 Less 3.x(然后没有真正的理由不升级到 3.7，因为 3.* 之间没有重大变化版本)——没有理由为琐碎的循环使用递归混合。递归 mixin 循环仍然只对生成“递归值”有用，即当每个新迭代需要重用 prev 生成的值时。迭代 - 这是 each 做不到的事情。

无论哪种方式，让我们看看您的示例有什么问题 - 仅供引用。

您的主要错误是您将媒体查询的“下一次迭代调用”(即 .g-loop(@g - 1);)放在了错误的位置。基本上，您将它放在媒体查询 block 的内部，而它应该放在它的外部。因此，它们在结果中相互嵌套也就不足为奇了。
让我们从一个简化的示例开始(只是一个以相同方式实现的单级循环):

.outer-iter(@i) when (@i > 0) {
    block {
        .outer-iter(@i - 1);
        itick: @i;
    }
}

.outer-iter(3);

这将生成如下内容:

block {
  itick: 3;
}
block block {
  itick: 2;
}
block block block {
  itick: 1;
}

正是因为每个新的 block 都是在前一个 block 的内部生成的。
在这种情况下，正确的循环代码是:

.outer-iter(@i) when (@i > 0) {
    .outer-iter(@i - 1);
    block {
        itick: @i;
    }
}

还有一些表面上的错误(不是很严重的错误，但仍然存在)表明您使用了一些石器时代教程(大约 6 岁左右)。简而言之:

  • 使用 .*-loop (0) {} 终端 - 暂时不需要(只是噪音)
  • 硬编码的 n 次迭代值 - 每次数据更改时，您都必须找到并修复它们。请改用 length 函数。

好吧，我不会用其他外观问题来打扰你(是的，还有一些)，让我们停止使用(某种程度上的)固定代码:


...

@max-pm-size: 50;

.g-loop(@g) when (@g > 0) {

    @responsive: extract(@responsivevars, @g);
    @responsiveabv: extract(@responsivevarsabv, @g);

    @media (max-width: @@responsive) {

        .h-loop(@h) when (@h > 0) {

            .i-loop(@i) when (@i > -1) {

                .j-loop(@j) when (@j > 0) {
                    @direction: extract(@directionlist, @j);
                    @directionname: extract(@directions, @j);
                    @type: extract(@spacingtype, @h);
                    @typeabv: extract(@sapcingtypeabv, @h);

                    .@{typeabv}-@{responsiveabv}-@{direction}-@{i} {
                        @{type}-@{directionname}: @i*1px !important; /* each time you use !important a kitty dies */
                    }

                    .j-loop(@j - 1);
                }

                .j-loop(length(@directions));
                .i-loop(@i - 5);
            }

            .i-loop(@max-pm-size);
            .h-loop(@h - 1);
        }

        .h-loop(length(@spacingtype));

    } // ~ end of @media

    .g-loop(@g - 1); // <- this was your key mistake
}

.g-loop(length(@responsivevars));

关于css - 较少循环遍历数组会不断附加先前的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55503221/

上一篇：html - 我如何将边距顶部添加到跨度的图像部分？

下一篇：javascript - 如何在固定导航栏下显示图片？

相关文章：

vb.net - 如何让数组一次显示其所有值

css - less 中的相邻同级选择器

html - 大量 CSS 适配 IE 7

javascript - 多张图片(xml -> javascript -> CSS)被覆盖，只显示一张图片

css - 背景图像在特定浏览器宽度下变得响应

c - C中的for循环令人困惑

javascript - 在 ReactJs 中循环数组

html - IE Whitespace 像 bug 但不是 whitespace bug

css - 如何自定义Auth0锁控件的样式？

css - 带有媒体查询的 div 中的 svg 放置

©2024 IT工具网  联系我们