Html 填充仅适用于1个分区中的我，为什么？

我为两个不同的div元素编写了相同的填充，它只适用于其中的一个

我已经尝试将样式应用于不同的元素，使用边距，创建更多的div，使用宽度，可能还有更多的东西，但是找不到解决方案。还有，这是正确的做法吗？我应该改用按钮吗

HTML

---

您可以尝试

[attribute^=value]

选择器。在这种情况下，将使用

[class^=“button”]

您可以尝试

[attribute^=value]

选择器。在这种情况下，将使用

[class^=“button”]

两个

div

标记具有相同的

填充

，我刚刚发现您的代码中有错误

在CSS代码中

/* It means applying background-color at .button1 and .button2 > a */
.button1, .button2 a {
  background-color: #b0f4e6;
}

所以，这个代码应该是这样的

.button1, .button2{
  background-color: #b0f4e6;
}

/* OR */
.button1 a, .button2 a{
  background-color: #b0f4e6;
}

。登录{
文本对齐：居中；
右边距：2x20px；
}
.按钮1{
显示：内联块；
填充：2x10px；
}
.按钮2{
显示：内联块；
填充：2x10px；
}
.按钮1，
.按钮2{
背景色：#b0f4e6；
}

两个

div

标记具有相同的

填充

，我刚刚发现您的代码中有错误

在CSS代码中

/* It means applying background-color at .button1 and .button2 > a */
.button1, .button2 a {
  background-color: #b0f4e6;
}

所以，这个代码应该是这样的

.button1, .button2{
  background-color: #b0f4e6;
}

/* OR */
.button1 a, .button2 a{
  background-color: #b0f4e6;
}

。登录{
文本对齐：居中；
右边距：2x20px；
}
.按钮1{
显示：内联块；
填充：2x10px；
}
.按钮2{
显示：内联块；
填充：2x10px；
}
.按钮1，
.按钮2{
背景色：#b0f4e6；
}

最好这样编写代码：

HTML

---

你最好这样写你的代码：

HTML

。登录{
文本对齐：居中；
}
.button1、.button2{
显示：内联块；
}
.按钮1 a、.按钮2 a{
背景色：#b0f4e6；
填充：20px 10px；
颜色：黑色；
}

。登录{
文本对齐：居中；
}
.button1、.button2{
显示：内联块；
}
.按钮1 a、.按钮2 a{
背景色：#b0f4e6；
填充：20px 10px；
颜色：黑色；
}

    <div class="button1"><p class="pButton"><a href="#">Login to view List</a></p></div>
</div>
<div class="login">
    <div class="button2"><p class="pButton"><a href="#">Login to see Profile</a></p></div>

.button1 , .button2 {

background-color: #b0f4e6;
}