【发布时间】：2019-04-16 17:56:31
【问题描述】：
我正在创建定价卡，其中每张卡都是一个 1 列 6 行的网格。
我需要在文本单元格周围放置填充，这样它们的内容就不会碰到边缘。我可以应用内联样式属性，但这不起作用：
.plan-cost-details {
text-align: center;
padding: 20px;
}
嵌套的 div 也没有：
.plan-cost-details > div {
padding: 20px;
}
我尝试在网格单元格中添加填充，但无济于事。我已经尝试在其中嵌套第二个 div 并对其应用填充 - 也没有。
我正在尝试使用网格而不是弹性框，以便所有项目在卡片上排列。
我在这里缺少什么？我还有一个Codepen，网格中有两张卡片。
卡片：
<div class="pricing-plan-card">
<div class="plan-title">Professional</div>
<div class="plan-summary">
Try out features that will get you up and running.
</div>
<div class="plan-price">
<span class="currency">$</span>25
<div class="plan-price-interval">per month</div>
</div>
<div class="plan-price-details">
Billed annually or $12 month-to-month
</div>
<button class="btn btn-primary">Choose</button>
<div class="plan-features">
<p><strong>Free plus:</strong></p>
<ul>
<li>Feature item one and the benefits</li>
<li>Feature item two and the benefits</li>
<li>Feature item three and the benefits</li>
</ul>
</div>
</div>
SCSS：
.pricing-plan-card {
display: grid;
padding: 1.5rem;
background-color: #fff;
grid-template-areas: 'title' 'summary' 'price' 'pricedetail' 'button' 'features';
grid-template-columns: 1fr;
grid-template-rows: 60px 60px 80px 60px 75px 1fr;
.plan-title {
color: magenta;
font-family: helvetica;
font-size: 1.5rem;
text-align: center;
grid-area: title;
}
.plan-summary {
font-size: 1rem;
text-align: center;
grid-area: summary;
}
.plan-price {
text-align: center;
color: blue;
font-family: helvetica;
font-size: 3rem;
letter-spacing: -.05em;
grid-area: price;
.currency {
font-size: 2rem;
vertical-align: text-top;
}
.plan-price-interval {
display: block;
font-family: arial;
font-size: 14px;
letter-spacing: normal;
}
.plan-price-details {
text-align: center;
grid-area: pricedetail;
}
button {
display: block;
grid-area: button;
}
.plan-features {
grid-area: features;
div {
padding: 20px;
}
}
}
}
【问题讨论】：
-
把相关代码复制到本题，这样以后代码就在这里，以后的访问者可以看到相关代码。
-
另外，请建立一个minimal reproducible example，重点是minimal
-
@cale_b 完成，更精简
-
您是否尝试过将按钮添加到另一个
<div>行中而不是直接添加？ -
修复了按钮，但为什么单元格或封闭的 div 不显示正在应用的填充？如果我应用内联样式，它就不适用于类。