為什么沒有在列表項元素上應用填充？

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設置包含無效值（ padding的“自動”和border-bottom中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>