Question

.scss

public class company {
    @JsonProperty("profiles")
    Map<String, Integer> profiles;
}

html的

div.playlist {
        position: relative;
        display: inline-block;
    }
    div.playlist span {
        position: absolute;
        text-align: center;
        height: 100%;
        width: 100%;
        color: white;
        font-size: 20px;
        .span-icon {
            padding-bottom: 50px !important;
        }
    }
    div.playlist span:before {
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        content: '';
    }

我只需要将<div class="playlist"> <span class="span-icon"><ion-icon name="ios-star-outline"></ion-icon></span> <span>{{data.text}}</span> <img [src]="data.imageUrl" [alt]="data.text" /> </div>提供给第一个padding-bottom: 50px元素（即span）。我尝试过如下。但它不起作用。你能告诉我它在哪里问题

class="span-icon"

在浏览器上呈现：

 div.playlist span {
        position: absolute;
        text-align: center;
        height: 100%;
        width: 100%;
        color: white;
        font-size: 20px;
        .span-icon {
            padding-bottom: 50px !important;
        }
    }

Answer 1

您指定的SCSS不正确。请使用以下内容。 .span-icon不是span的孩子，而是.playlist

的孩子

div.playlist {
  span {
    position: absolute;
    text-align: center;
    height: 100%;
    width: 100%;
    color: white;
    font-size: 20px;
  }
  .span-icon {
    padding-bottom: 50px !important;
  }
}

Answer 2

在CSS中将.span-icon移出span范围。根据您的HTML，span-icon应用于跨度，即仅在不在跨度内的div内。

无法将填充底部应用于内跨元素

2 个答案: