为什么不对列表项元素应用填充？

Question

这是我的html代码：

<ul class="price-card__feature-list">
                <li class="price-card__feature-item">500 GB Storage</li>
                <li class="price-card__feature-item">2 Users Allowed</li>
                <li class="price-card__feature-item">Send up to 3 GB</li>
</ul>

这是我的scss代码：

.price-card{
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 .1rem .4rem rgba(#333, 0.2);
    color: $col-txt-med;

    &__feature-list{
        list-style: none;
    }

    &__feature-item{
        display: block;
        width: 90%;
        font-weight: 600;
        margin: 0 auto; 
        padding: 2rem auto 2rem;
        border-bottom: 1px solid rgba(#666, .2);
    }
}

如果编译为css：

.price-card{
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 .1rem .4rem rgba(#333, 0.2);
    color: $col-txt-med;   
}

.price-card__feature-list{
    list-style: none;
}

.price-card__feature-item{
        display: block;
        width: 90%;
        font-weight: 600;
        margin: 0 auto; 
        padding: 2rem auto 2rem;
        border-bottom: 1px solid rgba(#666, .2);
}

我想要的效果是，每个列表项后跟一行看起来像hr元素的行。我尝试使用border属性来实现此目的。但是现在我遇到了padding的麻烦。

Answer 1

您的padding和border设置包含无效值（“自动”和rgba的十六进制颜色值]

.price-card {
  padding: 2rem;
  border-radius: 5px;
  box-shadow: 0 .1rem .4rem rgba(#333, 0.2);
  color: $col-txt-med;
}

.price-card__feature-list {
  list-style: none;
}

.price-card__feature-item {
  display: block;
  width: 90%;
  font-weight: 600;
  margin: 0 auto;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(100,100,100, 0.2);
}

<ul class="price-card__feature-list">
  <li class="price-card__feature-item">500 GB Storage</li>
  <li class="price-card__feature-item">2 Users Allowed</li>
  <li class="price-card__feature-item">Send up to 3 GB</li>
</ul>