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

Question

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

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

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

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

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

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

为了给卡片设置样式以进行测试，我使用了 W3Schools 的代码片段：

.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;
}

这是它在网站上的外观：

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

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>