时间戳

首页 > 解决方案 > 如何修复未正确应用的 CSS？

html - 如何修复未正确应用的 CSS？

问题描述

除了 HTML 的两个部分之外，我的网站正在正确显示其所有 CSS。我有两个具有相同类名的 div 没有应用适当的 CSS。当我在本地主机上测试站点时应用了 CSS，但是当我将更新推送到实时站点时它神奇地消失了，即使链接的 CSS 表包含正确的代码。

我正在通过 BlueHost 托管我的网站。我上传了一个 index.html 文件、一个 .css 文件和一些图片。其他所有内容都存放在 webroot 目录中，并且工作正常。

我尝试重命名类名并重新发布 .css 文件。

/* 这组 CSS 不会在实时站点上应用。*/

.buttonSection {

 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 margin: 10px auto;
 width: 80%;
 }


.buttons {
  padding: 5px;
  border: 1px solid;
  flex-grow: 3;
}

.buttons a {
  font-size: 20px;
  text-align: center;
  margin: auto;
}

.logos {
  height: 4vh;
  margin-left: 15px;
}

.buttonSection {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
  width: 80%;
}
<div class="buttonSection">

  <div class="buttons" id="call">
    <a href="tel:111-111-1111">
      <img class="logos" src="\call.png"> Call Me</a>
  </div>

  <div class="buttons" id="text">
    <a href="sms:111-111-1111">
      <img class="logos" src="\text.png"> Text Me</a>
  </div>

  <div class="buttons" id="email">
    <a href="mailto:hello@gmail.com">
      <img class="logos" src="\email.png"> Email Me</a>
  </div>
</div>

我希望按钮 div 连续对齐。

我使用 Google Chrome 上的检查工具来测试是否应用了代码，并且“element.style{}”部分显示没有应用代码。当我将上面列出的代码放在本节中时，我看到了所需的结果。

标签： htmlcss

解决方案

据我所知，您的代码应该不是问题。也许在页面上尝试 CTR+F5（硬重新加载）并确保您的项目已保存。这应该重新加载页面的所有源，包括您的 CSS 文件，并清除您的测试域/本地主机的缓存。

推荐阅读