Question

我的网站正确显示了所有CSS，但HTML的两部分除外。我有两个具有相同类名的div，但没有应用适当的CSS。当我在本地主机上测试站点时，将应用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 {}”部分显示没有代码被应用。当我放入上面在本节中列出的代码时，会看到所需的结果。

Answer 1

您的代码…实际上，您的flexbox效果很好。这里没有问题。此错误必须来自其他区域。

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

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

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

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

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

<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>

Answer 2

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

如何解决CSS无法正确应用的问题？

2 个答案: