为什么没有在列表项元素上应用填充？答案

【问题标题】：Why is padding not being applied on the list item element?为什么没有在列表项元素上应用填充？
【发布时间】：2020-08-31 05:39:54
【问题描述】：

这是我的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 的麻烦。

【问题讨论】：

自动填充不是一件事。您的规则值无效。见stackoverflow.com/questions/18545587/…。
尝试padding: 2rem 0; 作为列表项。使用 rgba(48, 48, 48, 0.2) 作为颜色。

标签： html css html-lists padding

【解决方案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>

【讨论】：