卡片在主标签内未正确显示

Question

我目前正在开发一个小仪表板。

我有一个名为 profile.php 的文件，我尝试在其中创建一个带有 html 和 css 的卡片来显示用户的一些值。

但是，正确显示卡片似乎没有任何作用。下面是我用来创建卡片的代码：

<main>
  <div class="card">
    <div class="container">
      <p> Username: <?= $_SESSION['username'] ?> </p>
    </div>
  </div>
</main>

在个人资料页面本身的 css 中，我唯一使用 ma​​in 标签做某事的就是这部分：

main {
    margin-left: 5rem;
    padding: 1rem;
}

为了测试卡片的样式，我使用了 W3Schools 的 sn-p：

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
  padding: 2px 16px;
}

这是它在网站上的外观：

但是，现在的问题是，尽管我尝试了我想到的所有可行的方法，但它却无法显示卡片的盒子。它只是打印页面上的文本，根本没有样式。这与 ma​​in 标签有关吗？不能渲染盒子阴影或任何与样式相关的东西吗？我不相信..我的意思是为什么会这样。

Answer 1

它的工作原理就像您所看到的那样，可能是某些 css 覆盖卡类（然后将卡重命名为其他名称），或者您的 css 未应用。尝试在开发工具中调试。

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
  padding: 2px 16px;
}
main {
    margin-left: 5rem;
    padding: 1rem;
}

<main>
  <div class="card">
    <div class="container">
      <p> Username: darby </p>
    </div>
  </div>
</main>